Angularjs 将数据从一个控制器访问到另一个控制器

Angularjs 将数据从一个控制器访问到另一个控制器,angularjs,Angularjs,我卡住了,谁能帮我一下吗。这里是代码。我正在编写grabData服务来从url获取数据。然后在控制器firstcontroller中,我根据搜索框过滤数据:这是代码: .factory("grabData",['$http',function($http){ return{ showData:function(){ return $http.get("/http://localhost:5555/sampleData.json");

我卡住了,谁能帮我一下吗。这里是代码。我正在编写grabData服务来从url获取数据。然后在控制器firstcontroller中,我根据搜索框过滤数据:这是代码:

.factory("grabData",['$http',function($http){
    return{
        showData:function(){
            return $http.get("/http://localhost:5555/sampleData.json");
        }
    }
}])
.controller('firstController',function($scope, $filter,grabData) {
         grabData.showData().success(function(data){
         $scope.items = data;
         $scope.items1 = $scope.items;

         $scope.$watch('search', function(val){
              $scope.items = $filter('filter')($scope.items1, val);
         });
}
HTML代码是:

请任何人帮助我在下一个控制器中显示$scope.items

.controller('secondcontroller',function($scope){
   // Here I want to use $scope.items , from first controller
})
.controller('thirdcontroller',function($scope){
   // Here I want to use $scope.items , from first controller
})
.controller('fourthcontroller',function($scope){
   // Here I want to use $scope.items , from first controller
})

请任何人帮助解决这个问题。

您需要注射工厂:

.controller('firstController', ['grabData', function($scope, $filter,grabData) {
  // Your code here
}]);

您的其他控制器也是如此。

这样编写您的服务

.service("grabData",['$http', '$q', function($http, $q){

    var sampleData = null;
    var filteredData = null;

    this.showData = function () {
        var deferred = $q.defer();

        if(sampleData!=null){  
           //if data has already been fetched from server before, serve it
            deferred.resolve(sampleData)
        } 
        else {   
            //else, fetch the data from server, and store it for future use
            $http.get("/http://localhost:5555/sampleData.json").then(function(res){
              sampleData = res.data;
              deferred.resolve(sampleData);
            })
        }
        return deferred.promise;
     };

     //call this from controller1, inside your watch
     this.setFilteredData = function(data){
        filteredData = data;
     };

     //call this from other 2 controllers
     this.getFilteredData = function(){
       return filteredData;
     };


    }])
.controller('secondcontroller',function($scope, grabData){
   // do whatever you want to do with grabData
   //use that "grabData.showData().success" pattern as it is still a promise
})
.controller('thirdcontroller',function($scope, grabData){
   // do whatever you want to do with grabData
   // call grabData.getFilteredData() from here
})
.controller('fourthcontroller',function($scope, grabData){
   // do whatever you want to do with grabData
   // call grabData.getFilteredData() from here
})
然后像这样修改控制器

.service("grabData",['$http', '$q', function($http, $q){

    var sampleData = null;
    var filteredData = null;

    this.showData = function () {
        var deferred = $q.defer();

        if(sampleData!=null){  
           //if data has already been fetched from server before, serve it
            deferred.resolve(sampleData)
        } 
        else {   
            //else, fetch the data from server, and store it for future use
            $http.get("/http://localhost:5555/sampleData.json").then(function(res){
              sampleData = res.data;
              deferred.resolve(sampleData);
            })
        }
        return deferred.promise;
     };

     //call this from controller1, inside your watch
     this.setFilteredData = function(data){
        filteredData = data;
     };

     //call this from other 2 controllers
     this.getFilteredData = function(){
       return filteredData;
     };


    }])
.controller('secondcontroller',function($scope, grabData){
   // do whatever you want to do with grabData
   //use that "grabData.showData().success" pattern as it is still a promise
})
.controller('thirdcontroller',function($scope, grabData){
   // do whatever you want to do with grabData
   // call grabData.getFilteredData() from here
})
.controller('fourthcontroller',function($scope, grabData){
   // do whatever you want to do with grabData
   // call grabData.getFilteredData() from here
})

希望能有帮助。如果有任何疑问,请在评论中询问。

如果showData()是一个昂贵的服务器调用怎么办?你会为每个控制器多次调用它吗?如果是这样的话,对他来说使用ui路由器可能更为谨慎,将调用置于父状态的解析中,然后让子状态具有控制器。然后每个人都可以访问父级解析,该解析保存对showData()的单个调用。如果所有控制器都使用相同的代码,那么我是否必须为相应的HTML、div标记编写HTML代码..???@naik3这取决于您最终要做什么。例如,为什么有单独的控制器?如果它们都在同一页上,那么实际上只需要一个控制器。如果它们分布在多个页面和多个$states/views中(比如使用时),那么您可能希望按照我在上面的评论中的建议执行,并在一个解析中使用一个服务调用。当我不在工作的时候,我会把所有这些都放在一个编辑中,让它更清晰一点。缓存服务中的数据,如果它已经存在,就引用它。如果需要,请强制刷新,否则。然后根据需要将服务注入控制器。谢谢回复。。我在第一个控制器中进行过滤。我想在我的Remaging控制器中使用来自firstcontroller的过滤数据。我只能在grabData服务中写入过滤代码吗。如果是这种情况,我如何从HTML获取过滤输入并将其传递给grabData服务进行过滤。在
grabData
服务中,编写两个函数,
setFilteredata(data)
getFilteredata()
。从第一个控制器调用
setFilteredata
,从另两个控制器调用
getFilteredata
。这就行了。因为一切都发生在这个有角度的世界里,一部分的任何变化都会自动触发其他部分的变化。欢迎:)嗨。。我试过上面提到的代码。它给出了错误“grabData.setFilterData不是一个函数”,你能帮我一下吗。