Geek asks and answers

Angular.js Controller cannot set properties

I am using the https://github.com/angular/angular-seed clone to create a simple Angular.js application. I am trying to add some properties to the controllers in order to bind them in my HTML, but keep getting error messages that I cannot understand.

My controllers.js file looks like this:

'use strict';

/* Controllers */

angular.module('myApp.controllers', []).
  controller('MyCtrl1', [function($scope) {
    $scope.names = 'bob'
  }])
  .controller('MyCtrl2', [function() {

  }]);

Here is also app.js if this helps:

'use strict';

// Declare app level module which depends on filters, and services
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives',     'myApp.controllers']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller:  'MyCtrl1'});
    $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
    $routeProvider.otherwise({redirectTo: '/view1'});
  }]);

I used the default name for the myApp application and also named ng-view in my HTML. When MyCtrl1 is used, I constantly get this error:

TypeError: Cannot set property 'names' of undefined

Is something syntactically wrong here? I was only trying to modify controllers.js to avoid problems, so there should be no problems elsewhere ...

+5
source share
1

, :

angular.module('myApp.controllers', []).
  controller('MyCtrl1', function($scope) {
    $scope.names = 'bob'
  })
  .controller('MyCtrl2', function() {

  });

Angular , $scope:

angular.module('myApp.controllers', []).
  controller('MyCtrl1', ['$scope', function($scope) {
    $scope.names = 'bob'
  }])
  .controller('MyCtrl2', [function() {

  }]);

: http://docs.angularjs.org/guide/dev_guide.mvc.understanding_controller

+14

More articles:


All Articles