我在我的应用中使用ui-router
。
app.config(['$stateProvider', function($stateProvider){
$stateProvide.state('State1', {
url:'/State1',
resolve: {
data: function(Service){
return Service.init();
}
},
views: {
"header": {
templateUrl: 'views/header.tpl.html'
},
"center":{
templateUrl: 'views/center.tpl.html'
},
"footer": {
templateUrl: 'views/footer.tpl.html'
}
}
}
})
}
]);
我尝试从服务器加载json文件并在路由器中解析它。
在resolve
对象中,我调用负责返回promise的服务。
Service.js:
app.service("Service", ['$rootscope', '$http', function($rootscope, $http){
var promise;
this.init = function(){
promise = this.loadData();
return promise;
};
this.loadData = function(){
var url = "users/getData/json.json";
return $http.get(url).then(function(response){
return response.data;
}, function(error){
alert(error);
})
};
}])
center.tpl.html:
<aside id="first-item" ng-controller="FirstController as firstController">
<first-directive>
</aside>
<aside id="second-item" ng-controller="SecondController as secondController">
<second-directive>
</aside>
这是我想要获取已解析数据的控制器。
FirstController.js:
app.controller('FirstController', ['$scope', 'data', function($scope, data){
this.myData = data;
}]);
我收到了下一个错误:Unknown provider: dataProvider < - data
。为什么呢?
答案 0 :(得分:1)
因为承诺在返回之前永远不会得到解决。试试这个。
app.service("Service", ['$rootscope', '$http', function($rootscope, $http){
var promise;
this.init = function(){
return this.loadData();
};
this.loadData = function(){
var url = "users/getData/json.json";
return $http.get(url).then(function(response){
return response.data;
}, function(error){
alert(error);
})
};
}])
答案 1 :(得分:1)
来自ui-router文档:
//控制器等待上述每一项都是
//在实例化之前完全解析。例如, //在promiseObj的承诺为
之前,控制器不会实例化 //已经解决了然后将这些物体注入控制器
//可供使用。
清除已解析的变量仅在状态配置中定义的控制器中可用。您无法在普通控制器中解析这些变量,并且您正试图在控制器中使用状态配置中的data
,因此您将收到该错误。
但是,要在FirstController
中获取这些数据,您可以这样做:
app.config('$stateProvider', ['$rootScope', function ($stateProvider) {
$stateProvide.state('State1', {
url: '/State1',
resolve: {
data: function (Service) {
var data = Service.init();
$rootScope.$broadcast("dataReceivedFoo", {data: data});
return data;
}
},
views: {
"header": {
templateUrl: 'views/header.tpl.html'
},
"center": {
templateUrl: 'views/center.tpl.html'
},
"footer": {
templateUrl: 'views/footer.tpl.html'
}
}
})
}]);
然后,在你的控制器中读取:
app.controller('FirstController', ['$scope' function($scope){
$scope.$on("dataReceivedFoo", function(response) {
$scope.myData = response.data;
})
}]);
基本上,我们会从您的州配置广播数据,然后在您的FirstController
中接收。
答案 2 :(得分:1)
我认为将controller: 'FirstController'
行添加到州将解决问题。
app.config(['$stateProvider', function($stateProvider){
$stateProvide.state('State1', {
url:'/State1',
controller: 'FirstController',
resolve: {
data: function(Service){
return Service.init();
}
},
views: {
"header": {
templateUrl: 'views/header.tpl.html'
},
"center":{
templateUrl: 'views/center.tpl.html'
},
"footer": {
templateUrl: 'views/footer.tpl.html'
}
}
}
})
}
]);
<强>解析强>
您可以使用resolve为控制器提供内容或数据 这是国家的习惯。 resolve是一个可选的map 应该注入控制器的依赖项。
如果这些依赖项中的任何一个是承诺,它们将被解析并且 转换为控制器实例化之前的值和 $ stateChangeSuccess事件被触发。
resolve属性是一个地图对象。地图对象包含 键/值对:
键 - {string}:要注入的依赖项的名称 控制器即可。
factory - {string | function}:如果是string,那么它是
服务的别名。否则如果是函数,那么它是注入的 返回值被视为依赖项。如果结果是 承诺,它是在控制器实例化之前解决的 值被注入控制器。