Angular UI中的子视图路由器和控制器继承
Sub-views in Angular UI router and Controller inheritance?
我有一个这样的视图状态,有三个视图:
(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'对象的子状态。
请注意,模板总是与控制器配对。因此,由于它不使用模板属性,因此不需要实例化控制器。您有两个选择:
- 使用指定每个视图的控制器。这将为每个命名视图实例化一个控制器,可能不是你想要的。
- 为这个状态创建一个父状态,它是抽象的,并且使用控制器。请注意,上面的状态没有子/父关系,它只是一个带有一些命名视图的状态。
相关文章:
- 有没有任何方法可以将控制器从文件加载到ui路由器$stateProvider中
- Ui路由器:获取控制器中视图的名称
- 堆叠有角度路由器添加控制器
- Ember.js:如果控制器中满足某些条件,则在路由器中重定向
- 使用UI路由器实现控制器A的最佳实践方法
- 如何将值与$scope绑定,以从定义状态ui路由器的控制器中使用ng模型进行查看
- AngularJS:控制器在使用UI路由器更改状态时多次注册
- EmberJS:如何从控制器转换到路由器's的操作
- 让我的角度控制器检查一下ui是怎么看的's位于ui路由器中
- 如何使用铁路由器用一个路由控制器渲染多个模板
- AngularJS UI 路由器:包含控制器脚本的位置
- UI 路由器 AngularJS 控制器无法使用状态
- 如何在使用具有嵌套视图的 ui 路由器时添加用户控制器
- Ember 路由器中的“this._super(控制器,型号)”是什么意思?
- 如何使用requireJs以正确的顺序定义控制器,路由器和应用程序
- 在铁路由器控制器中调用函数
- ng-controller工作,UI路由器:控制器不是
- Angularjs UI路由器控制器在解析后未更新
- Ember.js 路由器/控制器属性
- 流星订阅在铁:路由器控制器是't工作