UI-路由器不是 运行 有视图部分的控制器

UI-Router not running controller when there is a view section

我有一个非常奇怪的问题,似乎简单的视图模板正在阻止执行控制器,我不明白为什么。 我构建了一个简单的 plunker 代码在这里:

angular.module('plunker', ["ui.router"])
  .config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    $urlRouterProvider.otherwise("/nested");
    $stateProvider
      .state('nested', {
        url: '/nested',
        controller: function($scope) {
          $scope.sayHi = 'Hi';
          this.sayHello = 'Hello';
        },
        controllerAs: 'dog',
        //If I comment the "views" section, controller runs correctly
        views: {
          'main': {
            template: 'MainContent'
          },
          'secondary': {
            template: 'SecondaryContent'
          }
        }
      })
    $locationProvider.html5Mode(false).hashPrefix('!');
  })

html:

<div ui-view>
  <h1>{{dog.sayHello}}</h1>
  <h1>{{sayHi}}</h1>
  <p>Why no "hello" or "Hi" over here?</p>
  <div ui-view="main"></div>
  <div ui-view="secondary"></div>
</div>

如果我注释掉状态定义中的 "views" 部分,控制器将正确运行。

[编辑] 感谢 Radim,我决定在视图部分移动控制器定义:

                         views:{
                          '':{
                              controller: function ($scope) {
                                  this.page = 'ten';
                              },
                              controllerAs:'dog'
                          },
                          'main@nested':{
                              template:'MainContent'
                          },
                          'secondary@nested':{
                              template:'SecondaryContent'
                          }
                      }

检查:

controller 始终属于 view,而不属于 state

an updated plunker

.state('nested', {
    url: '/nested',
    //controller: function($scope) {
    //  $scope.sayHi = 'Hi';
    //  this.sayHello = 'Hello';
    //},
    //controllerAs: 'dog',
    //If I comment the "views" section, controller runs correctly
    views: {
      'main': {
        //template: 'MainContent', - let's use view, to consume dog.sayHello
        templateUrl: 'view2.html',
        controller: function($scope) {
          $scope.sayHi = 'Hi';
          this.sayHello = 'Hello';
        },
        controllerAs: 'dog',
      },
      'secondary': {
        template: 'SecondaryContent',
        controller: ...
      }
    }

检查the updated plunekr