AngularJS：指令和外部控制器

指令，并承诺
数据服务
共享服务来存储数据中检索应该进行更新每当
控制该指令调用数据服务上的数据请求。

以下是相关的代码片段。

假设内部指令gerSearkator的HTML包含一个按钮，点击后，
执行向链路中定义的getResults()功能。

应该拨打服务gerSearch，更新gerSearchResults服务，这反过来又
应该更新$scope内ResultsController，因此绑定到它的视图。

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

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

数据服务

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

共享服务

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

Control，更新

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>

到目前为止，我已经能够使用来解决这个问题：

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

但是......是它的正确方法？

我添加了一个plunker更好地解释这个问题（除去使用$范围。在$（“searchDataUpdated” ... http://plnkr.co/edit/yorXy5SaAbAZKXRoo4vv?p=preview

基本上，当我按一下按钮，我想填充表与检索的数据

来源

2013-09-23 Matteo Piazza

问题是有些不明确和代码是不明确的善意共享小提琴请 –

OK ，我会尽快发布小提琴... –

我已经为您更新了类似的工作副本，以更新角度服务指令将体现在控制器中http://plnkr.co/edit/IcthzM059QM1rkkyhtYA?p=preview –

只要把服务变量观察者

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

来源

2013-09-23 19:41:07

Thanx！我猜目前为止，这是触发$ rootscope广播的最佳解决方案。我只是想知道是不是可以有一个“自动”双向绑定。 –

不知道什么是确切的问题，但原因可能是您用resultData新对象替换对象引用。

searchResults.resultsData = data;

你可以尝试像

searchResults.resultsData.length=0; 
angular.forEach(data,function(item){ 
    searchResults.resultsData.push(item); 
});

来源

2013-09-23 14:57:09 Chandermani

mmm ...它似乎没有工作... –

AngularJS：指令和外部控制器

回答

相关问题