Question

我有一个非常奇怪的问题，显然简单的视图模板似乎阻止了控制器的执行，我无法理解为什么。我构建了一个简单的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'
                          }
                      }

Answer 1

检查：

UI-Router Multiple Views Single Controller not work

controller 始终属于视图，而不属于州。

有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

当存在视图部分时，UI-Router没有运行控制器

1 个答案: