控制器无法访问Angular Service变量

Question

我的Angular Service存在问题。我有两个控制器和一个服务。基本上，第一个控制器通过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; 
    }); 

}

Answer 1

因为SharedDataService不在$scope，将$watch method的第一个参数需要是watchExpression function，而不是一个Angular expression string。

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 Reference - $watch。

Answer 2

你必须写来存储数据到服务，从服务

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); 

设置数据的方法...

Answer 3

试它

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); 
}); 

Answer 4

也许你应该保存价值使用对象在s在我的项目中，我总是这样做：

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进行设置并获取价值。试试吧。祝你好运。

Answer 5

最佳实践是在服务中进行任何$ http /资源调用，而不是直接在控制器或指令中进行调用。这使代码更模块化，链接更少。

理论上，应该有

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); 

    } 
});