Javascript 角度UI路由器和控制器继承中的子视图?
我有这样一个视图状态,有3个视图:Javascript 角度UI路由器和控制器继承中的子视图?,javascript,angularjs,angular-ui-router,angularjs-controller,Javascript,Angularjs,Angular Ui Router,Angularjs Controller,我有这样一个视图状态,有3个视图: (function() { 'use strict'; angular.module('pb.tracker').config(function($stateProvider) { $stateProvider.state('tracker', { url: '/tracker', controller: 'TrackerController as tracker', data: {
(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'
}
}
});
});
})();
定义命名视图时(使用
视图
属性,也称为“命名视图”),状态的模板属性将被每个命名视图覆盖。从:
如果定义视图对象,将忽略您所在州的templateUrl、template和templateProvider。因此,如果需要这些视图的父布局,可以定义包含模板的抽象状态,以及包含“视图”对象的布局状态下的子状态
请注意,模板始终与控制器配对。因此,由于它不使用模板属性,因此不需要实例化控制器。你有两个选择:
- 使用为每个视图指定控制器。这将为每个命名视图实例化一个控制器,可能不是您想要的
- 创建此状态的父状态,该状态为抽象状态并使用控制器。请注意,上面的状态没有子/父关系,它只是一个状态和一些命名视图
templateUrl
,而是使用template
属性并给它一个简单的字符串值:template:
(当父级不需要任何HTML时)