Angularjs breaks with coffeescript function expression

Question

I'm working on integrating AngularJs into an example Nodejs application. My controller is as follows:

UsersCtrl = ($scope, $http) ->    
   $scope.newUser = {}
   $scope.users = [
     name: "aloman"
     email: "[email protected]"
   ]

which compiles into javascript:

// Generated by CoffeeScript 1.3.3
(function() {
  var UsersCtrl;

  UsersCtrl = function($scope, $http) {
    $scope.newUser = {}; 
    return $scope.users = [ 
      {   
        name: "aloman",
        email: "[email protected]"
      }   
    ];  
  };
}).call(this);

The code above breaks with console log:
Error: Argument 'UsersCtrl' is not a function, got undefined

However removing the anonymous function wrapped around the compiled javascript works fine. The working code is shown below.

var UsersCtrl;
Usersctrl = function($scope, $http) {
    $scope.newUser = {};
    $scope.users = [{
        name: "aloman",
        email: "[email protected]" 
    }];
};

Any reason why my compiled code isn't working. I have a feeling it has to do with Angular's scope injection. I'm using AngularJS 1.0.1

Andrew Joslin · Accepted Answer · 2013-02-05 14:56:50Z

38

It would be best to use this syntax so you don't pollute the global scope:

angular.module('myApp').controller('MyController', ($scope) ->)

edited Feb 5, 2013 at 14:56

answered Aug 13, 2012 at 12:55

Andrew Joslin

43k21 gold badges102 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

pepper Over a year ago

I'm using angular.module('myModuleName').controller('MyControllerName', ($scope) ->)

Andrew Joslin Over a year ago

I guess I'll edit the post with that so people aren't encouraged to create global variables (those mess up tests bad)

Sam Barnum Over a year ago

I believe you need an empty array as a second parameter after the module name. angular.module('myApp', []).controller('MyController', ($scope) ->)

Andrew Joslin Over a year ago

If you supply the empty array, it will create a new module called 'myApp' with no dependencies. If you have no array, it will just get the existing 'myApp' module.

TheHippo · Accepted Answer · 2013-01-29 05:27:00Z

0

Despite that all current answers are right there is a 3rd option:

When you compile you CoffeeScript to JavaScript make sure you set the --bare option to the CoffeeScript compiler, which make him omit the function wrapper in the output.

answered Jan 29, 2013 at 5:27

TheHippo

63.3k15 gold badges77 silver badges101 bronze badges

2 Comments

Todd Over a year ago

Doing that will put everything into the global scope, which is generally frowned upon (and specifically called out in the AngularJS docs but oddly not followed in their own tutorial or seed project's controllers -- but is for directives, filters, and services).

Shyam Habarakada Over a year ago

I agree this shouldn't be done, for the reason (unnecessarily pollutng the global scope) mentioned above by Todd

Collectives™ on Stack Overflow

Angularjs breaks with coffeescript function expression

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related