我对AngularJS很陌生,所以我仍然在努力使用我的JQuery和原生的javascript思维方式。
我有一个应用程序,其中我有3个控制器和一个自定义指令,我希望该指令通知另一个控制器而不是它自己的父来获取一些数据。
我提出了一个解决方案,其中我有以下服务,其中包含一个包含数据的变量,一个getter和setter函数以及一个变量,我在我的控制器中切换和监视何时更新。
myApp.service('sharedService', function () {
this.update = false;
this.data = [];
this.toggleUpdate = function(){
if(this.update === false){
this.update = true;
}
else {
this.update = false;
}
};
this.getData = function () {
return this.data;
};
this.setData = function(value) {
this.data = value;
};
});
在我的指令中,我只需要调用sharedService.toggleUpdate();当我希望控制器从资源中获取新数据时。我的控制器然后使用$ scope。$ watch来监视我服务中更新的更改。
myApp.controller('PlanController', ['$scope', 'sharedService', function($scope, sharedService){
$scope.init = function(){
//fetch data from API
}
//watch for toogling the new data
$scope.$watch(function () {
return sharedProps.update;
}, function(newVal, oldVal) {
$scope.init();
}, true);
});
我希望你能得到这张照片 - 这是一种正确的方法吗?或者我错过了一些更简单的方法吗?
答案 0 :(得分:1)
@alexc建议我做什么,这是一个例子:
myApp.service('sharedService', function ($rootScope) {
this.update = false;
this.data = [];
this.toggleUpdate = function() {
this.update = !this.update;
};
this.getData = function () {
return this.data;
};
this.setData = function(value) {
this.data = value;
// The data has been set so let's let everyone know
$rootScope.$broadcast('dataSet');
};
});
控制器:
myApp.controller('PlanController', ['$rootScope', '$scope', 'sharedService', function($rootScope, $scope, sharedService){
$scope.init = function(){
//fetch data from API
}
// Each controller would have this, rather than the $watch
$rootScope.$on('dataSet', function () {
// Shared Service has been updated so let's get the data
$scope.myObj = sharedService.getData();
})
});
如果这适合您,请让@alexc发布答案并接受他的。
答案 1 :(得分:1)
好的,所以这是我的答案,我不确定具体的要求,所以下面的答案只是我对问题的理解:
myApp.service('sharedService', [ '$rootScope', function ($rootScope) {
this.update = false;
this.data = [];
this.toggleUpdate = function(){
this.update = !this.update;
if(this.update===true){
this.setData();
$rootScope.$broadcast('onDataSet');
}
};
this.getData = function () {
return this.data;
};
this.setData = function(value) {
this.data = value;
};
}]);
myApp.controller('PlanController', ['$rootScope', '$scope', 'sharedService', function($rootScope, $scope, sharedService){
$scope.init = function(){
//fetch data from API
}
// Each controller would have this, rather than the $watch
$rootScope.$on('onDataSet', function () {
// Shared Service has been updated so let's get the data
$scope.myObj = sharedService.getData();
})
});
如果那就是你想要的,请告诉我。