Eckiger Controller-Bereich/Variablen werden nicht angezeigt

Question

Ich versuche, meinen Code so zu bereinigen, dass er John Papas Angular Style Guide entspricht, aber dabei etwas kaputt gegangen ist und mein Controller nicht mehr in ng-Inspector angezeigt wird. Wenn ich bekommen kann vm.message angezeigt werden ich den Rest herausfinden kann (obwohl eine allgemeine Feedback geschätzt :))

(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

Sie versuchen, Ihren Controller mehr zu instanziiert als einmal in Ihrem Code, und das wird nicht so funktionieren, wie Sie es erwarten.

Sie sollten ng-controller nicht in Vorlagen verwenden, die Teil eines Status sind. Der Controller wird vom Statusanbieter definiert und nicht in der Vorlage instanziiert.

Entfernen ng-controller aus Ihrer Vorlage, und fügen Sie controllerAs zu Ihrem Staat:

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