Question

我希望有人可以解释为什么我的控制器为空以及我可以做些什么来访问我的html中的控制器。根据我的$ stateProvider，当我导航到localhost：3000 / display时，我应该可以访问我的DisplayController。然而，情况似乎并非如此。我知道网址正在渲染模板（表格标题显示），但没有数据。

我已经尝试在display-functional.ng.html页面的顶部放置一个{{DisplayController == null}}，但它返回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 = {};

更新：对于路由调试，我使用此

.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();
    });
});

stateProvider中定义的angularjs控制器未传递到html页面

1 个答案: