Angular controller not printing variables to view

Question

Angular controller is not talking to view. ng-app is included, and also is ng-controller.

Using meanJS.

Here is the view:

<section ng-app="my-module" ng-controller="MyModuleController">
  <div>
    {{ costumers[0] }}
  </div>
</section>

Here is the controller:

(function() {
  'use strict';

  angular
    .module('my-module')
    .controller('MyModuleController', MyModuleController);

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

  function MyModuleController($scope) {
    var vm = this;

    // My module controller logic
    // ...

    $scope.costumers = [{
      name: 'John Doe',
      city: 'New York'
    }, {
      name: 'Peter Griffin',
      city: 'San Francisco'
    }];

    init();

    function init() {

    }
  }
})();

@Mr.Arjun angular.js:11706 Error: [ng:areq] Argument 'MymoduleController' is not a function, got undefined — GreetingsFriend
– GreetingsFriend, Commented Mar 27, 2017 at 4:36

michelem · Accepted Answer · 2017-03-27 04:53:26Z

1

Try to use vm instead the $scope:

function MyModuleController($scope) {
    var vm = this;

    vm.costumers = [{
      name: 'John Doe',
      city: 'New York'
    }, {
      name: 'Peter Griffin',
      city: 'San Francisco'
    }];

    init();

    function init() {

    }
  }

HTML:

<section ng-app="my-module" ng-controller="MyModuleController as vm">
  <div>
    {{ vm.costumers[0] }}
  </div>
</section>

edited Mar 27, 2017 at 4:53

answered Mar 27, 2017 at 4:41

michelem

14.6k5 gold badges55 silver badges67 bronze badges

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

2 Comments

michelem Over a year ago

So you have other problems

michelem Over a year ago

Sorry I forgot you need to change also this: <section ng-app="my-module" ng-controller="MyModuleController as vm">

GreetingsFriend · Accepted Answer · 2017-03-27 05:49:05Z

After loosing a few hair, i've solved the problem. The problem was in routing file, a simple misspelling in controller's name. "Argument 'MymoduleController' is not a function, got undefined" listed at the browser console, shows that it is spelled wrong. It was intended to be MyModuleController, not MymoduleController. Thanks for the help guys, problem solved!

Here is the fixed routing file:

(function() {
  'use strict';

  //Setting up route
  angular
    .module('my-module')
    .config(routeConfig);

  routeConfig.$inject = ['$stateProvider'];

  function routeConfig($stateProvider) {
    // My module state routing
    $stateProvider
      .state('my-module', {
        url: '/my-module',
        templateUrl: 'modules/my-module/client/views/my-module.client.view.html',
        controller: 'MyModuleController',
        controllerAs: 'vm'
      });
  }
})();

Collectives™ on Stack Overflow

Angular controller not printing variables to view

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related