角度控制器范围/变量未出现

Question

我正在尝试清理我的代码，使其与John Papa的Angular样式指南相对应，但在此过程中破坏了某些内容，我的控制器不再出现在ng-inspector中。如果我能得到vm.message显示我可以弄清楚其余的（虽然任何一般反馈意见：））

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

Answer 1

您尝试在代码中多次实例化控制器，这将无法按预期方式工作。

您不应在属于州的模板中使用ng-controller。控制器由状态提供程序定义，不在模板内实例化。

从模板中移除ng-controller，然后将controllerAs添加到您的州：

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