在指令和控制器之间共享数据的正确方法是什么

时间:2014-05-12 20:21:36

标签: javascript angularjs

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

我希望你能得到这张照片 - 这是一种正确的方法吗?或者我错过了一些更简单的方法吗?

2 个答案:

答案 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发布答案并接受他的。

Here is a good little page to visit to get more information

答案 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();
    })    
});

如果那就是你想要的,请告诉我。