Контроллер angularjs, определенный в stateProvider, не передается в html-страницу

Question

Я надеюсь, кто-то сможет объяснить, почему мой контроллер равен нулю и что я могу сделать, чтобы получить доступ к моему контроллеру в моем html. Согласно моему $ stateProvider, когда я перехожу к localhost: 3000/display, у меня должен быть доступ к моему DisplayController. Однако, похоже, это не так. Я знаю, что URL-адрес создает шаблон (отображение заголовков таблиц), но данных нет.

Я попытался разместить {{DisplayController == null}} в верхней части страницы display-functional.ng.html, но он возвращает null.

У меня есть следующие $ stateProvider

app.config(['$urlRouterProvider', '$stateProvider', '$locationProvider', function($urlRouterProvider, $stateProvider, $locationProvider){ 
    $locationProvider.html5Mode(true); 
    $stateProvider 
     .state('display', { 
     url: '/display', 
     templateUrl: 'display-functionality.ng.html', 
     controller: 'DisplayController' 
     }) 
     .state('display-non', { 
     url: '/display/non', 
     templateUrl: 'display-non-functionality.ng.html', 
     controller: 'DisplayController' 
     }); 

    $urlRouterProvider.otherwise("/dispatches"); 
}]); 

и мой display-functionality.ng.html

<div class="table-responsive"> 
    <table id="information" class="table table-striped"> 
     <thead> 
      <tr> 
       <td>Time</td> 
       <td>Address</td> 
      </tr> 
     </thead> 
     <tbody> 
      <tr id="display{{$index}}" ng-repeat-start="function in DisplayController.functions | orderBy: '-time'"> 
       <td>{{function.time | date:'MM/dd/yyyy @ h:mma'}}</td> 
       <td>{{function.address}}</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

Answer 1

Вы должны использовать синтаксис controllerAs

app.config(['$urlRouterProvider', '$stateProvider', '$locationProvider', function($urlRouterProvider, $stateProvider, $locationProvider){ 
$locationProvider.html5Mode(true); 
$stateProvider 
    .state('display', { 
    url: '/display', 
    templateUrl: 'display-functionality.ng.html', 
    controller: 'DisplayController', 
    controllerAs: 'displayCtrl' 
    }) 
    .state('display-non', { 
    url: '/display/non', 
    templateUrl: 'display-non-functionality.ng.html', 
    controller: 'DisplayController', 
    controllerAs: 'displayCtrl' 
    }); 

$urlRouterProvider.otherwise("/dispatches"); 

}]);

, а затем в файлах шаблонов просмотра используйте controllerAs псевдоним вы определили

<div class="table-responsive"> 
<table id="information" class="table table-striped"> 
    <thead> 
     <tr> 
      <td>Time</td> 
      <td>Address</td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr id="display{{$index}}" ng-repeat-start="function in displayCtrl.functions | orderBy: '-time'"> 
      <td>{{function.time | date:'MM/dd/yyyy @ h:mma'}}</td> 
      <td>{{function.address}}</td> 
     </tr> 
    </tbody> 
</table> 

Также помните, чтобы сделать это в вашем контроллере

var displayCtrl = this; 

и все свойства сферы применения должны быть объявлены на этом контроллере. Переменная псевдонима в вашем контроллере

displayCtrl.functions = {}; 

Update: Для отладки маршрута я использую этот

.run(function ($rootScope, $state) { 
    $rootScope.$on('$stateChangeStart', 
     function(event, toState, toParams, fromState, fromParams){ 
      console.log(fromState.name + ' to ' + toState.name); 
     }); 
    $rootScope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams, error) { 
     alert(error); 
     event.preventDefault(); 
    }); 
});