Aja*_*ngh 4 angularjs angularjs-scope
我有两个控制器 - searchBoxController和productList.我想要做的是从多个控制器更新范围变量$ scope.products.我知道将它定义为根变量是一个非常糟糕的设计 - 但将其放在共享服务中并不能解决问题.更新未反映在HTML模板中!
function SearchTermService(){
this.productSearch = function(data, $http){
var url = "";
$http.get(url).then(function(resp){
return resp.data;
},
function(err){
console.log(err);
});
};
};
var app = angular.module('app', []);
app.service("myService", MyService);
app.service("searchTermService", SearchTermService);
app.run(function($rootScope) {
$rootScope.products = new Date();
});
app.controller('productList', function ($scope, $rootScope, $http, myService) {
$rootScope.products = prod_res;
});
app.controller('searchBoxController', function($scope, $http, searchTermService, $rootScope){
$scope.getSearchResults = function(){
$rootScope.products = searchTermService.productSearch($scope.term, $http)
};
});
PS:我不确定在'searchBoxController'中分配$ rootScope.products时是否需要返回一个promise,因为console.log表示未定义.目前我没有从服务中退回承诺.
Pau*_*tes 10
为了在多个控制器上更新范围变量,您可以使用角度服务.
您应该使用它,因为所有角度服务都是单例,因此您可以轻松共享通用逻辑,在控制器之间共享数据.
我做了一个例子,我使用服务来更新一些数据.然后,我的工厂返回一个对象数据,因此我们将得到一个对象,而不仅仅是一个固定值.多亏了这一点,我们的数据将会更新,我们将保留绑定数据.
调节器
(function(){
function Controller($scope, $timeout, Service) {
//Retrieve current data object of our service
$scope.data = Service.value;
//will be set to 4
$timeout(function(){
Service.set(4, 'product');
}, 1000);
}
angular
.module('app', [])
.controller('ctrl', Controller);
})();
(function(){
function Controller2($scope, $timeout, Service) {
//Retrieve current data object of our service
$scope.data2 = Service.value;
}
angular
.module('app')
.controller('ctrl2', Controller2);
})();
服务
(function(){
function Service() {
//Our data object
var data = {
product: null
};
function set(value, field){
data[field] = value;
}
return {
set: set,
value: data
};
}
angular
.module('app')
.factory('Service', Service);
})();
HTML
<body ng-app='app'>
<div ng-controller='ctrl'>
<h2>Service value : {{data.product}}</h2>
</div>
<div ng-controller='ctrl2'>
<h2>Service value from controller2 : {{data2.product}}</h2>
</div>
</body>
因此,我们将在多个控制器之间共享数据.通过使用服务,您可以避免使用$rootScope.
你可以看到Working plunker
| 归档时间： |
|
| 查看次数： |
8453 次 |
| 最近记录： |