Angular controller scope/variables not appearing

Question

I'm trying to clean up my code such that it corresponds to John Papa's Angular style guide but in the process broke something and my controller no longer appears in ng-inspector. If I can get vm.message to display I can figure out the rest (though any general feedback is appreciated :))

(function () {
  "use strict";

  angular
    .module('roomchoice.manager-dashboard.alerts', [
      'ui.router'
    ])

    .config(function config($stateProvider) {
      $stateProvider.state('manager.alerts', {
        url: '/alerts',
        views: {
          "main": {
            controller: 'AlertsController',
            templateUrl: 'manager-dashboard/alerts/alerts.tpl.html'
          }
        },
        data: {
          pageTitle: 'Alerts'
        }
      });
    })

    .controller('AlertsController', AlertsController);

    function AlertsController($scope, Restangular) {
      var vm = this;

      vm.message = "Hello";
      vm.settlements = [];
      vm.undepositedPayments = [];
      vm.unapprovedFunnels = [];
      vm.getSettlements = getSettlements;
      vm.getUndepositedPayments = get_UndepositedPayments;
      vm.getUnapprovedFunnels = get_unapprovedFunnels;

      function getSettlements() {
        Restangular.all('alerts/get_settlements').getList().then(function(settlements){
          vm.settlements = settlements;
          return vm.settlements;
        });
      }//End of getSettlements

      function getUndepositedPayments() {
        Restangular.all('alerts/get_undepositedpayments').getList().then(function(undepositedpayments){
          vm.undepositedPayments = undepositedpayments;
          return vm.undepositedPayments;
        });
      }//End of getUndepositedPayments

      function getUnapprovedFunnels() {
        Restangular.all('alerts/get_unapprovedfunnels').getList().then(function(unapprovedfunnels){
          vm.unapprovedFunnels = unapprovedfunnels;
          return vm.unapprovedFunnels;
        });
      }//End of getUnapprovedFunnels
    }//End of Controller
})();//End of Module

<div id="main" ng-controller="AlertsController as alerts">
	<div>
		<h1>Alerts (Under Construction) </h1>
		<h2>{{alerts.message}}</h2>
	</div>
</div>

Any error in the console? the one on here says angular not defined but i take for granted you have it in your working copy. — Aurelio
– Aurelio, Commented Dec 7, 2016 at 23:51
Are you getting any error? the Alerts (Under Construction) text is shown? — Kstro21
– Kstro21, Commented Dec 7, 2016 at 23:52
don't use controller on your state and ng-controller in your template at the same time. remove the ng-controller in the template, and add controllerAs: alerts in your state definition — Claies
– Claies, Commented Dec 7, 2016 at 23:53

Claies · Accepted Answer · 2016-12-07 23:57:55Z

3

You are trying to instantiate your controller more than once in your code, and this won't work the way you expect.

You should not use ng-controller in templates that are part of a state. The controller is defined by the state provider, and does not be instantiated inside the template.

Remove ng-controller from your template, and add controllerAs to your state:

$stateProvider.state('manager.alerts', {
    url: '/alerts',
    views: {
      "main": {
        controller: 'AlertsController',
        controllerAs: 'alerts',
        templateUrl: 'manager-dashboard/alerts/alerts.tpl.html'
      }
    },
    data: {
      pageTitle: 'Alerts'
    }
  });

answered Dec 7, 2016 at 23:57

Claies

22.4k4 gold badges56 silver badges81 bronze badges

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

Collectives™ on Stack Overflow

Angular controller scope/variables not appearing

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related