Angular 控制器 scope/variables 没有出现

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

Angular 控制器 scope/variables 没有出现

Angular controller scope/variables not appearing

javascript

angularjs

html

ng-controller