Angular UI中的子视图路由器和控制器继承

Sub-views in Angular UI router and Controller inheritance?

本文关键字:路由器 控制器 继承 视图 UI Angular      更新时间:2023-09-26

我有一个这样的视图状态,有三个视图:

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

当你定义命名视图时(使用views属性,又名"命名视图"),状态的模板属性被每个命名视图覆盖。来自文档:

如果你定义了一个视图对象,你的状态的templateUrl, template和templateProvider将被忽略。所以在你需要这些视图的父布局的情况下,你可以定义一个包含模板的抽象状态,以及布局状态下包含'views'对象的子状态。

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

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