AngularJS:在指令和外部控制器之间共享数据 [英] AngularJS: sharing data between directive and external controller

问题描述

基本上我有:

• 指令，
• 有承诺的数据服务
• 用于存储检索到的数据的共享服务
• 控制在指令调用数据服务上的数据请求时应更新的内容.

相关片段如下.

假设指令 gerSearkator 中的 html 包含一个按钮，当点击该按钮时，
执行指令链接中定义的 getResults() 函数.

它应该调用服务 gerSearch，更新 gerSearchResults 服务，后者又
应该更新 ResultsController 内的 $scope 并因此绑定到它的视图.

但是...为什么它不起作用?

指令

angular.module('ger.directives').directive('gerSearkator', ['$http', 'gerSearch','gerSearchResults',功能($http，搜索，搜索结果){返回 {限制:'A'，范围: {ngModel: '='},替换:真的，templateUrl: 'js/directives/searkator.html',链接:函数($scope，$element，$attrs){$scope.src.getResults = function() {search.get($scope.src.params).then(//成功功能(数据，状态，标题，配置){searchResults.resultsData = 数据；},//错误功能(数据，状态，标题，配置){//管理错误...});};}}}]);

数据服务

 angular.module('ger.services').factory('gerSearch', ['$http', '$q', 'gerConfig',功能($http，$q，配置){返回 {//"params" 是一个对象得到:函数(参数){var d = $q.defer();$http.get(config.searchResultsPath, {params: params}).success(function(data, status, headers, config) {d.resolve(数据，状态，标题，配置)；}).error(function(data, status, headers, config) {d.拒绝(数据，状态，标题，配置)；});返回 d. 承诺；}};}]);

共享服务

angular.module('ger.services').factory('gerSearchResults', function() {返回 {结果数据:{}};});

控制更新

 angular.module('ger').controller('ResultsController', function($scope, gerSearchResults) {$scope.searchResults = gerSearchResults.resultsData;});

HTML

<!-- 搜索框--><div ger-searkator></div><!-- 标签 --><div class="row" ng-controller="ResultsController"><div class="col-lg-12"><code>{{searchResults}}</code>

到目前为止，我已经能够使用以下方法解决问题:

$scope.$on('searchDataUpdated', function() {$scope.searchResults = gerSearchResults.resultsData;});

但是……这是正确的方式吗?

我添加了一个 plunker 来更好地解释问题(删除使用 $scope.$on('searchDataUpdated'... http://plnkr.co/edit/yorXy5SaAbAZKXRoo4vv?p=preview

基本上，当我点击按钮时，我想用检索到的数据填充表格.

解决方案

只需在服务变量上放置一个观察者

angular.module('Gene').controller('ResultsController', function($scope, gerSearchResults) {$scope.searchResults = {};$scope.$watch(function(){返回 gerSearchResults.resultsData;}，函数(新值，旧值){如果(新值===旧值)返回；$scope.searchResults=新值；})});

Basically I have:

• directive,
• data service with a promise
• shared service to store data retrieved
• control which should be updated whenever the directive invoke a data request on the data service.

Relevant snippets following.

Let's say the html inside directive gerSearkator contain a button which, when clicked,
executes the getResults() function defined inside the directive link.

It should call the service gerSearch, update the gerSearchResults service, which in turn
should update the $scope inside ResultsControllerand consequently the view binded to it.

But... why it does not work?

DIRECTIVE

angular.module('ger.directives').directive('gerSearkator', ['$http', 'gerSearch',    
        'gerSearchResults',
function($http, search, searchResults) {
  return {
    restrict: 'A',
    scope: {
        ngModel: '='
    },
    replace: true,
    templateUrl: 'js/directives/searkator.html',
    link: function($scope, $element, $attrs) {
        $scope.src.getResults = function() {
            search.get($scope.src.params).then(
                // success
                function(data, status, headers, config) {
                    searchResults.resultsData = data;                       
                },
                // error
                function(data, status, headers, config) {
                    // manage error...
                }
            );
        };
    }
}
}]);

DATA SERVICE

 angular.module('ger.services').factory('gerSearch', ['$http', '$q', 'gerConfig',
 function($http, $q, config) {  
    return {
        // "params" is an object
        get: function(params) {
            var d = $q.defer();

            $http.get(config.searchResultsPath, {params: params})
                .success(function(data, status, headers, config) {  
                    d.resolve(data, status, headers, config);
                })
                .error(function(data, status, headers, config) {                
                    d.reject(data, status, headers, config);
                }
            );

            return d.promise;
        }
    };  
    }]);

SHARED SERVICE

angular.module('ger.services').factory('gerSearchResults', function() { 
    return {
        resultsData: {}
    };  
});

CONTROL TO UPDATE

 angular.module('ger').controller('ResultsController', function($scope, gerSearchResults) { 
    $scope.searchResults = gerSearchResults.resultsData;    
 });

HTML

<div ng-app="ger">
<!-- search box-->
<div ger-searkator></div>

<!-- tabs -->
<div class="row" ng-controller="ResultsController">
    <div class="col-lg-12">
        <code>{{searchResults}}</code>
    </div>
</div>
</div>

So far I have been able to solve the problem using:

$scope.$on('searchDataUpdated', function() {
    $scope.searchResults = gerSearchResults.resultsData;
});

But... is it the right way?

I added a plunker to better explain the problem (removing the use of $scope.$on('searchDataUpdated'... http://plnkr.co/edit/yorXy5SaAbAZKXRoo4vv?p=preview

Basically, when I click on the button I would like to populate the table with retrieved data.

解决方案

Just put a watcher on service variable

angular.module('Gene').controller('ResultsController', function($scope, gerSearchResults) {

    $scope.searchResults = {};
    $scope.$watch(function(){
      return gerSearchResults.resultsData;
    },function(newvalue,oldvalue){
      if(newvalue===oldvalue)return;
      $scope.searchResults=newvalue;
    })
});

这篇关于AngularJS:在指令和外部控制器之间共享数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！