CODEWITHSUNDEEP
javascriptangularjsviewcontroller
GreetingsFriend
GreetingsFriend

Reputation: 341

Angular controller not printing variables to view

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() {

    }
  }
})();

Upvotes: 1

Views: 776

Answers (2)

GreetingsFriend
GreetingsFriend

Reputation: 341

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'
      });
  }
})();

Upvotes: 0

michelem
michelem

Reputation: 14590

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>

Upvotes: 1

Related Questions