javascript - Angular js $scope error - Stack Overflow

admin管理员组

文章数量:1305657

I trying to get on my feet with angular.js using the seed app.

When the browser executes my controller i get the following error:

TypeError: Cannot set property 'players' of undefined
at new bankC (http://localhost:8888/monopoly/js/controllers.js:18:20)
at invoke (http://localhost:8888/monopoly/lib/angular/angular.js:2795:28)
at Object.instantiate (http://localhost:8888/monopoly/lib/angular/angular.js:2805:23)
at http://localhost:8888/monopoly/lib/angular/angular.js:4620:24
at update (http://localhost:8888/monopoly/lib/angular/angular.js:13692:26)
at http://localhost:8888/monopoly/lib/angular/angular.js:8002:24
at Array.forEach (native)
at forEach (http://localhost:8888/monopoly/lib/angular/angular.js:110:11)
at Object.Scope.$broadcast (http://localhost:8888/monopoly/lib/angular/angular.js:8000:11)
at http://localhost:8888/monopoly/lib/angular/angular.js:7185:26 

this is the controller code which is the controller.js file

function bankC($scope) {
  $scope.players = [
      {
        id: 0,
        name: "Playe1",
        balance: 1500
      },
      {
        id: 1,
        name: "Player2",
        balance: 1500
      },
      {
        id: 2,
        name: "Player 3",
        balance: 1500
      }
  ];
}
bankC.$inject = [];

Thanks

EDIT:

its registered with angular js to be used when on a certain "page"

angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives']).
config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: MyCtrl1});
    $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: MyCtrl2});
    $routeProvider.when('/bank', {templateUrl: 'partials/bank.html', controller: bankC});
    $routeProvider.otherwise({redirectTo: '/bank'});
}]);

EDIT2:

Removing "bankC.$inject = [];" from the controller file solved the problem, so why does the angular.js seed app include it?

I trying to get on my feet with angular.js using the seed app.

When the browser executes my controller i get the following error:

TypeError: Cannot set property 'players' of undefined
at new bankC (http://localhost:8888/monopoly/js/controllers.js:18:20)
at invoke (http://localhost:8888/monopoly/lib/angular/angular.js:2795:28)
at Object.instantiate (http://localhost:8888/monopoly/lib/angular/angular.js:2805:23)
at http://localhost:8888/monopoly/lib/angular/angular.js:4620:24
at update (http://localhost:8888/monopoly/lib/angular/angular.js:13692:26)
at http://localhost:8888/monopoly/lib/angular/angular.js:8002:24
at Array.forEach (native)
at forEach (http://localhost:8888/monopoly/lib/angular/angular.js:110:11)
at Object.Scope.$broadcast (http://localhost:8888/monopoly/lib/angular/angular.js:8000:11)
at http://localhost:8888/monopoly/lib/angular/angular.js:7185:26 

this is the controller code which is the controller.js file

function bankC($scope) {
  $scope.players = [
      {
        id: 0,
        name: "Playe1",
        balance: 1500
      },
      {
        id: 1,
        name: "Player2",
        balance: 1500
      },
      {
        id: 2,
        name: "Player 3",
        balance: 1500
      }
  ];
}
bankC.$inject = [];

Thanks

EDIT:

its registered with angular js to be used when on a certain "page"

angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives']).
config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: MyCtrl1});
    $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: MyCtrl2});
    $routeProvider.when('/bank', {templateUrl: 'partials/bank.html', controller: bankC});
    $routeProvider.otherwise({redirectTo: '/bank'});
}]);

EDIT2:

Removing "bankC.$inject = [];" from the controller file solved the problem, so why does the angular.js seed app include it?

• javascript
• angularjs

Share Improve this question Follow edited Aug 7, 2012 at 14:20 Cooltrooper asked Aug 7, 2012 at 13:45 CooltrooperCooltrooper 11933 silver badges1111 bronze badges 4

• are you sure that you're calling the function with a defined parameter, not undefined? – sedran Commented Aug 7, 2012 at 13:47
• how would i define the parameter in angularjs? This may be where im going wrong.... – Cooltrooper Commented Aug 7, 2012 at 13:52
• how is the bankC function called? – jbabey Commented Aug 7, 2012 at 13:56
• see edit, i've added where its registered – Cooltrooper Commented Aug 7, 2012 at 14:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

You are getting that error because of the last line

bankC.$inject = [];

This tells the angular injector to inject nothing into the controller while the controller is looking for $scope.

If you change this to

bankC.$inject = ['$scope'];

it should work fine.

That last line exists because angular uses Dependancy Injection. Angular looks for variables with name $scope when you request for it in a controller. But if the code is minified then the obfuscation will change the name of $scope to something else. In order to maintain sanity when this happens that last line is introduced. When ever you declare a new controller the best practice would be to include that last line with all the variables you want angulars DI to inject into that controller.

Note : If you are interested in getting more things injected into that controller ( or similiar controllers ) then you will have to update bankC.$inject as well.

本文标签： javascriptAngular js scope errorStack Overflow