角度コントローラのスコープ/変数が表示されない

Question

John Papaの角度スタイルガイドに対応するようにコードをクリーンアップしようとしていますが、プロセスが途切れてコントローラが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"> 
 
\t <div> 
 
\t \t <h1>Alerts (Under Construction) </h1> 
 
\t \t <h2>{{alerts.message}}</h2> 
 
\t </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' 
    } 
    });