[英]In Angular ui-router nested state url changes,but template is not loading
[英]Angular UI-Router - using “resolve” directly on template url
我正在使用UI-Router并希望将路由更改为“基于组件”。 因此,我不想定义控制器/模板,而是像这样使用它:
.state('issue', {
url: '/someUrl/:number',
template: '<my-directive></my-directive>',
resolve: {
data: function(dataService) {
return dataService.getData().then(function(response) {
console.log(response.data);
return response.data;
});
}
}
})
现在,我知道使用Angular的ngRoute
我可以直接在模板中使用已解析的数据,例如:
$routeProvider
.when('/', {
template: `<my-directive data="resolve.data"></my-directive>`,
resolve: {
data: function (dataService) {
return dataService.getData();
}
}
})
我无法使用UI-Router(值未定义)。
难道我做错了什么? 是否可以使用ui-router?
UI-Router
的要点是 - resolve
结果可用于controller
(与模板相关) 。 所以,我们可以这样做:
.state('issue', {
url: '/someUrl/:number',
template: '<my-directive data="stateCtrlData"></my-directive>',
controller: function($scope, data) { $scope.stateCtrlData = data },
resolve: {
data: function(dataService) {
return dataService.getData().then(function(response) {
console.log(response.data);
return response.data;
});
}
}
})
data
传递到控制器,从它的范围我们传递给指令。
如果你的意思是注入数据服务,那么你可以这样做(请记住''告诉注入):
state('issue', {
url: '/someUrl/',
template: '<my-directive data="pep.data"></my-directive>',
controller: function( data) { this.data = data },
controllerAs: 'pep',
resolve:{
dataSvc : 'YourDataSvc',
campaign : function(dataSvc){
return dataSvc.getData();
}
}
请记住,如果您想要添加其他视图或子状态,则可以使用ui-view
。
实际上你可以(仅在ui-router v0.3.2中测试)
有一个未记录的 $ resolve变量,它会自动注入控制器中。 只需将“controllerAs”属性添加到状态,如下所示,您可以在模板中使用$ resolve:
.state('issue', {
url: '/someUrl/:number',
template: '<my-directive data="vm.$resolve.data"></my-directive>',
controllerAs: 'vm',
resolve: {
data: function(dataService) {
return dataService.getData().then(function(response) {
console.log(response.data);
return response.data;
});
}
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.