Angular UI路由器和Controller继承中的子视图？

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来处理状态中的所有视图。 我认为他们会简单地继承父母。

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

    (function() {

  'use strict';

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

    var _this = this;

    // _this.packageHistory = HistoryResolve;

    $log.debug('foo');


  });

})();

所以，我的控制台应该读“foo”，是吗？ 控制台中没有任何内容。 没有错误。 工作正常，视图加载模板。 我只是卡在控制器上。 我从来没有碰到这个。

更新确定，我正在尝试定义父状态，并将控制器分配给它。 但是，我在下面的内容是浏览器中根本没有任何结果......

    (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属性，又称“命名视图”）时，每个命名视图都会覆盖状态的模板属性。 从文档 ：

如果定义视图对象，则将忽略状态的templateUrl，template和templateProvider。 因此，如果您需要这些视图的父布局，则可以定义包含模板的抽象状态，以及包含“视图”对象的布局状态下的子状态。

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

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