在我的情况下如何将数据传递给不同的控制器?

时间:2014-06-03 23:48:49

标签: javascript angularjs

我正在努力为宁静的服务创建工厂。

我需要进行服务电话。第一个呼叫的数据将用于获取第二个呼叫数据。 我的问题是我不知道如何将数据从一个控制器传输到另一个控制器。

有没有更好的方法来执行我的代码?

以下是我的代码......

var app = angular.module('myApp', []);

//getting init data via service
app.factory('myService', function($http) {
  var myService = {
    async: function() {     
      var promise = $http.get('test/test.json').then(function (response) {

        return response.data;
      });
       return promise;
    }
  };
  return myService;
});


//retrieve data 
app.controller('testCtrl', function(myService, $scope, $http) {
   myService.async().then(function(data) {
       $scope.data = data
       //using retrieve data to get another piece of data
       vay first = data[0].employee[0];
   })    

   $http({
        url: "test?" + first +'.json',
        method: "GET",
        }).success(function(secondData) {
           $scope.secondData=secondData  //How do I pass data to my secondCtrl?
        })
})


app.controller('secondCtrl', function($scope) {
   // I need to be able to get the secondData from testCtrl.
   console.log($scope.secondData)
})

感谢您的帮助!

2 个答案:

答案 0 :(得分:1)

为什么不将数据作为对象存储在服务本身中,然后两个控制器都依赖于服务并且可以访问数据。像这样:

app.factory('myService', function($http) {
    var that = this;
    var myService = function($http) {
        this.set = function(url) {     
             var promise = $http.get(url).then(function (response) {
                that.data = promise.data;


        });
           return promise;
        }
    };
    return new myService($http);
});

然后你的控制器设置并获取数据

app.controller('testCtrl', function(myService, $scope, $http) {
   myService.set('someurl').then(function() {
       $scope.data = myservice.data;
       //using retrieve data to get another piece of data
       vay first = data[0].employee[0];

       myservice.set('someOtherUrl?data='+first);
}) 



app.controller('secondCtrl', function($scope, myservice) {
    //the data object on the myservice function has been changed on the first controller and we can reasonably expect the data we need.  If these 2 controllers coexist in the same space and time we can wrap this in a $watch service
    console.log(myservice.data)
});

$ watch service example

app.controller('secondCtrl', function($scope, $watch, myservice) {
    $watch('myservice.data', function(newval, oldval) {
        console.log(newval);
    }, true)
    //I will only log the newvalue of myservice.data when the data has changed.  the last true argument is a neccesity so that angular will compare the values within the object
});

答案 1 :(得分:1)

您可以扩展'myService'以包含响应数据,在两个控制器中使用它,或者您可以创建另一个服务以在它们之间共享数据。

两种解决方案看起来都很相似,但这是第二种选择(新服务)的样子:

<强>工厂

.factory('SharedService', function(){
    var shared = {
      data: ''
    }
    return shared;
})

这个工厂可以作为存储一些数据的地方。事实上,如果你想做的就是共享数据,你可以使用value provider。但是,您可以在以后使用更复杂的数据结构和方法扩展工厂。

在您的控制器中,只需注入服务,并可选择将其设置为范围变量:

控制器1

.controller('FirstController', function($scope, SharedService){
    $scope.shared = SharedService;
    $scope.shared.data = 'foo';
})

$scope.shared现在引用服务对象。如果你在另一个控制器中做同样的事情,他们都可以读/写同一个对象:

控制器2

.controller('SecondController', function($scope, SharedService){
    $scope.shared = SharedService;
    console.log($scope.shared.data); // 'foo' if called after first ctrl set it
})

Demo