[英]Controller cannot access Angular Service variable
我的 Angular 服务有问题。 我有两个控制器和一项服务。 基本上,第一个控制器通过 AJAX 调用获取数据并将该数据存储在服务上。 然后第二个控制器通过服务访问该数据。 我已经成功地将数据从第一个控制器传递到服务,但是,当我从第二个控制器访问数据时,它什么都不返回。
顺便说一下,我有一个带有 2 个控制器的视图。
谢谢
服务
app.service('SharedDataService', function () {
// Holds subtask that will be passed to other controllers
// if SharedDataService is invoke.
var _subTask = {};
return {
subTask : _subTask
};
});
控制器 1
app.controller('MainCategoryController',function($scope,$http,SharedDataService){
$scope.loadSubtask = function(m_uid){
$http({
method: 'POST',
url: $locationProvider + 'query_stasks',
data: {
m_uid: m_uid
}
}).then(function successCallback(response) {
SharedDataService.subTask = response.data;
},function errorCallback(response){
});
}
}
控制器 2
app.controller('SubTaskController',function($scope,$http,$location,$rootScope,SharedDataService){
$scope.$watch('SharedDataService.subTask', function(newValue,oldValue){
console.log("ni sud');");
if (newValue !== oldValue) {
$scope.subTasks = newValue;
}
return SharedDataService.subTask;
});
}
也许你应该在服务中保存价值使用对象。在我的项目中,我总是这样做:
app.service('SharedDataService', function () {
var service = {};
service._subTask = '';
service.toogle_sub_task = function(v){
if(v){
service._subTask = v;
}
return service._subTask;
}
return service;
});
然后,在您的控制器中。 您应该调用 service.toogle_sub_task 来设置和获取值。 试一试吧,祝好。
因为SharedDataService
不在$scope
, $watch
方法的第一个参数需要是watchExpression
函数而不是Angular 表达式字符串。
app.controller('SubTaskController',function($scope,$http,$location,$rootScope,SharedDataService){
$scope.$watch(
function watchExpression() {return SharedDataService.subTask},
function listener (newValue,oldValue){
console.log("ni sud");
if (newValue !== oldValue) {
$scope.subTasks = newValue;
}
}
});
});
有关更多信息,请参阅AngularJS $rootScope.scope API 参考 - $watch 。
您必须编写一个方法将数据存储到服务中并从服务中返回数据
app.factory('SharedDataService', function () {
// Holds subtask that will be passed to other controllers
// if SharedDataService is invoke.
var _subTask = [];
function setSubTask = function(data){
_subTask = data;
};
return {
subTask : _subTask,
setSubTask:setSubTask
};
});
并在控制器调用中
SharedDataService.setSubTask(response.data);
设置数据...
尝试一下
app.service('SharedDataService', function () {
this._subTask ={};
});
// keep code same 1st controller
app.controller('MainCategoryController',function($scope,$http,SharedDataService){
$scope.loadSubtask = function(m_uid){
$http({
method: 'POST',
url: $locationProvider + 'query_stasks',
data: {
m_uid: m_uid
}
}).then(function successCallback(response) {
SharedDataService._subTask = response.data;
},function errorCallback(response){
});
}
}
// 2nd controller
app.controller('SubTaskController',function($scope,$http,$location,$rootScope,SharedDataService){
console.log(SharedDataService._subTask );
});
最佳实践是在服务中调用任何 $http/resource 调用,而不是直接在控制器或指令中调用。 这使得代码更加模块和更少的相互关联。
理想情况下你应该有
app.factory('SharedDataService', function ($http) {
var subtasks = [];
var saveSubtasks = function(sub){
subtasks = sub;
console.log(subtasks)
}
var tasks = {
loadSubtasks : function(m_uid){
$http({
method: 'POST',
url: $locationProvider + 'query_stasks',
data: {
m_uid: m_uid
}
}).then(function(data){
saveSubtasks(data);
});
},
getSubtasks : function(){
return subtasks;
}
}
return tasks;
});
并像使用它一样
app.controller('SharedDataService',function($scope,SharedDataService){
$scope.load = function(val){
SharedDataService.loadSubtasks(val);
}
});
app.controller('SubTaskController',function($scope,SharedDataService){
$scope.get = function(){
$scope.subtasks = SharedDataService.getSubtasks();
console.log($scope.subtasks);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.