Sub-views in Angular UI 路由器和控制器继承？

Question

我有这样的视图状态，有 3 个视图：

    (function() {

  'use strict';

  angular.module('pb.tracker').config(function($stateProvider) {
    $stateProvider.state('tracker', {
        url: '/tracker',
        controller: 'TrackerController as tracker',
        data: {
          pageTitle: 'Parcel Tracker',
          access: 'public',
          bodyClass: 'tracker'
        },
        resolve: {
          HistoryResolve: function($log, MockDataFactory) {
            return MockDataFactory.query({
              filename: 'trackingdata'
            });
          }
        },
        views: {
          '': {
            templateUrl: 'modules/tracker/templates/tracker.html'
          },
          'controls@tracker': {
            templateUrl: 'modules/tracker/templates/tracker-controls.html'
          },
          'content@tracker': {
            templateUrl: 'modules/tracker/templates/tracker-details.html'
          }
        }
      });

  });

})();

我想为状态中的所有视图使用控制器 TrackerController。我以为他们会简单地继承 parent 一个。

但到目前为止，即使是简单的日志也没有显示在控制台中。控制器是

    (function() {

  'use strict';

  angular.module('pb.tracker').controller('TrackerController', function($log, HistoryResolve) {

    var _this = this;

    // _this.packageHistory = HistoryResolve;

    $log.debug('foo');


  });

})();

所以，无论如何，我的控制台应该显示 "foo"，是吗？控制台中没有任何内容。没有错误。工作正常，视图加载模板。我只卡在控制器上。我从来没有运行进入这个。

更新好的，我正在尝试定义一个 parent 状态，并将控制器分配给它。但是，我在下面看到的是在浏览器中什么也没有产生...

    (function() {

  'use strict';

  angular.module('pb.tracker').config(function($stateProvider) {
    $stateProvider.state('tracker', {
        url: '/tracker',
        abstract: true,
        controller: 'TrackerController as tracker',
        data: {
          pageTitle: 'Parcel Tracker',
          access: 'public',
          bodyClass: 'tracker'
        },
        resolve: {
          HistoryResolve: function($log, MockDataFactory) {
            return MockDataFactory.query({
              filename: 'trackingdata'
            });
          }
        }
      })
    .state('tracker.details', {
        url: '/tracker/details',
        views: {
          '': {
            templateUrl: 'modules/tracker/templates/tracker.html'
          },
          'controls@tracker': {
            templateUrl: 'modules/tracker/templates/tracker-controls.html'
          },
          'content@tracker': {
            templateUrl: 'modules/tracker/templates/tracker-details.html'
          }
        }
      });

  });

})();

Answer 1

当您定义命名视图（使用 views 属性，又名 "named views"）时，状态的模板属性将被每个命名视图覆盖。来自 documentation:

If you define a views object, your state's templateUrl, template and templateProvider will be ignored. So in the case that you need a parent layout of these views, you can define an abstract state that contains a template, and a child state under the layout state that contains the 'views' object.

请注意，模板始终与控制器配对。因此，由于它不使用模板属性，因此不需要实例化控制器。您有两个选择：

使用为每个视图指定控制器。这将为每个命名视图实例化一个控制器，可能不是您想要的。
为此状态创建一个父状态，它是抽象的并使用控制器。请注意，您上面的状态没有 child/parent 关系，它只是一个状态 w/some 命名视图。

Sub-views in Angular UI 路由器和控制器继承？

Sub-views in Angular UI router and Controller inheritance?

javascript

angularjs

angularjs-controller

angular-ui-router