AngularJs $scope undefined when controllers are inside a module

Question

I'm trying to use the angular-seed template with the default settings. In controllers.js I use

angular.module('myApp.controllers', []).
  controller('MyCtrl1', [function($scope) {
      $scope.test = 'scope found!';
  }])
  .controller('MyCtrl2', [function() {

  }]);

There the $scope is always undefined. When I take the controller out of the module and register it globally it works fine. As here:

function MyCtrl1($scope) {
    $scope.test = "scope found!";
}
MyCtrl1.$inject = ['$scope'];

Could someone explain to me why this is?

Jonathan Moffatt · Accepted Answer · 2013-07-07 14:05:28Z

67

You cannot mix things like that. You need to decide on one of the two possibilities:

app = angular.module('test', []);

// possibility 1 - this is not safe for minification because changing the name
// of $scope will break Angular's dependency injection
app.controller('MyController1', function($scope) {
    // ...
});

// possibility 2 - safe for minification, uses 'sc' as an alias for $scope
app.controller('MyController1', ['$scope', function(sc) {
    // ...
}]);

I would not advise using the other syntax which declares Controller directly. Sooner or later with the growth of you app it will become hard to maintain and keep track. But if you must, there are 3 possibilities:

function myController1 = function($scope) {
    // not safe for minification
}

function myController2 = ['$scope', function(sc) {
    // safe for minification, you could even rename scope
}]

var myController3 = function(sc) {
    // safe for minification, but might be hard
    // to read if controller code gets longer
}
myController3.$inject = ['$scope'];

edited Jul 7, 2013 at 14:05

Jonathan Moffatt

13.5k8 gold badges54 silver badges49 bronze badges

answered Apr 29, 2013 at 17:42

TheHippo

63.3k15 gold badges77 silver badges101 bronze badges

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

7 Comments

Ashraf Fayad Over a year ago

Thanks for explaining. I still want to know how to get reference to $scope using the default syntax that google provided in their template: angular.module('myApp.controllers', []). controller('MyCtrl1', [function() { }]) .controller('MyCtrl2', [function() { }]);

TheHippo Over a year ago

@AshrafFayad The only way to get a reference to $scope is to define a controller in one of the above mentioned ways.

holographic-principle Over a year ago

Not entirely true, in fact you left out what I think is the most preferred way of doing it.

pbojinov Over a year ago

great explanation of the different ways to implement it. Bonus points for taking minification into account

Adam Hughes Over a year ago

Thanks - I never understood this. God I hate angularJS

|

holographic-principle · Accepted Answer · 2013-07-14 21:29:00Z

17

This is the proper way:

angular.module('myApp.controllers', []);

angular.module('myApp.controllers').controller('MyCtrl1', ['$scope', function($scope) {

}]);

answered Jul 14, 2013 at 21:29

holographic-principle

19.7k10 gold badges48 silver badges62 bronze badges

Comments

Zeeshan · Accepted Answer · 2014-01-27 11:18:39Z

1

I was also searching for that one, it seems that you need to type '$scope' before the function, as below:

    angular.module('myApp.controllers', []).
  controller('MyCtrl1', ['$scope', function($scope) {
      $scope.test = 'scope found!';
  }])
  .controller('MyCtrl2', ['$scope',function() {

  }]);

It kinda makes sense, I think it should be more clear though..

edited Jan 27, 2014 at 11:18

Zeeshan

7511 gold badge7 silver badges22 bronze badges

answered Jul 14, 2013 at 19:42

Dennis Tsoumas

1421 gold badge1 silver badge13 bronze badges

Comments

Patryk · Accepted Answer · 2015-03-18 12:12:13Z

-1

You can simply remove '[' and ']' when You are using $scope.

angular.module('myApp.controllers', []).
controller('MyCtrl1', function($scope) {
    $scope.test = 'scope found!';
  })
  .controller('MyCtrl2', [
    function() {

    }
  ]);

answered Mar 18, 2015 at 12:12

Patryk

1

1 Comment

Fábio Duque Silva Over a year ago

You cannot simply remove [ ] when using scope (or any other one, for that matter). You can do it, if you don't care about minification, which is something entirely different.

Collectives™ on Stack Overflow

AngularJs $scope undefined when controllers are inside a module

4 Answers 4

7 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related