我有以下状态配置:
$ stateProvider .STATE('客户',{ 网址:'/客户, templateUrl:应用程序/组件/客户/模板/ main.tpl.html', 观点:{ 名单:{ templateUrl:应用程序/组件/客户/模板/ list.tpl.html', 控制器:作为的ListCtrl CTRL } }, 解析:{ customerList:函数($ stateParams,CustomerResource){ 的console.log('努力解决'); VAR列表= CustomerResource.list($ stateParams); 返回列表; } } })
下面是主模板:
< DIV CLASS =容器> < DIV CLASS =行> <格UI视图=清单级=COL-LG-4/> <格UI视图=细节级=COL-LG-8/> < / DIV>< / DIV>
我看到的角度试图解决的依赖在控制台上。但这种依赖是从来没有在的意见
注入到控制器。我在做什么错在这里?
P.S。当我移动的意见
一些孩子喜欢的状态 customer.test
解析的依赖注入预期:
.STATE('customer.test',{ 网址:'/测试', 观点:{ 名单@客户:{ templateUrl:应用程序/组件/客户/模板/ list.tpl.html', 控制器:作为的ListCtrl CTRL } } })
解决方案
有一个工作plunker
这里的问题是不是与决心,但与主模板的注射。这应该是状态定义:
.STATE('客户',{ 网址:'/客户, // templateUrl:应用程序/组件/客户/模板/ main.tpl.html', 观点:{ '':{ templateUrl:应用程序/组件/客户/模板/ main.tpl.html }, 名单@客户:{ templateUrl:应用程序/组件/客户/模板/ list.tpl.html', 控制器:作为的ListCtrl CTRL } }, 解析:{ customerList:函数($ stateParams,CustomerResource){ 的console.log('努力解决'); VAR列表= CustomerResource.list($ stateParams); 返回列表; } } })
那么,这些在游戏:
.controller('的ListCtrl',['$范围,customerList',函数($范围,customerList){ $ scope.resolved = customerList}]).factory('CustomerResource',函数(){ 返回{ 清单:功能(PARAMS){返回的Hello world} }})
我们可以看到像这样的列表视图:
< DIV> < H3>列表视图< / H3 GT&; {{解决}}< / DIV>
将显示的世界,你好的
检查一下在这里的行动
I have the following state configuration:
$stateProvider
.state('customer', {
url: '/customers',
templateUrl: 'app/components/customer/templates/main.tpl.html',
views: {
'list': {
templateUrl: 'app/components/customer/templates/list.tpl.html',
controller: 'ListCtrl as ctrl'
}
},
resolve: {
customerList: function ($stateParams, CustomerResource) {
console.log('trying to resolve');
var list = CustomerResource.list($stateParams);
return list;
}
}
})
Here is the main template:
<div class="container">
<div class="row">
<div ui-view="list" class="col-lg-4"/>
<div ui-view="details" class="col-lg-8"/>
</div>
</div>
I see on the console that angular is trying to resolve the dependency. But this dependency is never injected into the controller under views
. What am I doing wrong here?
P.S. When I move views
to some child state like customer.test
the resolved dependency is injected as expected:
.state('customer.test', {
url: '/test',
views: {
'list@customer': {
templateUrl: 'app/components/customer/templates/list.tpl.html',
controller: 'ListCtrl as ctrl'
}
}
})
解决方案
There is a working plunker
The problem here is not with resolve, but with the injection of the main template. This should be the state definition:
.state('customer', {
url: '/customers',
//templateUrl: 'app/components/customer/templates/main.tpl.html',
views: {
'': {
templateUrl: 'app/components/customer/templates/main.tpl.html'
},
'list@customer': {
templateUrl: 'app/components/customer/templates/list.tpl.html',
controller: 'ListCtrl as ctrl'
}
},
resolve: {
customerList: function ($stateParams, CustomerResource) {
console.log('trying to resolve');
var list = CustomerResource.list($stateParams);
return list;
}
}
})
so, with these in play:
.controller('ListCtrl', ['$scope', 'customerList', function ($scope, customerList) {
$scope.resolved = customerList
}])
.factory('CustomerResource', function(){
return {
list: function(params){return "Hello world"}
}
})
we can see that list view like this:
<div>
<h3>list view</h3>
{{resolved}}
</div>
will show Hello world
Check it here in action