1

基本上我有：

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

相关片段如下。

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

它应该调用服务gerSearch，更新gerSearchResults服务，而服务又
应该更新$scope内部ResultsController，从而更新绑定到它的视图。

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

指示

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

控制更新

 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 以更好地解释问题（删除 $scope.$on('searchDataUpdated'... http://plnkr.co/edit/yorXy5SaAbAZKXRoo4vv?p=preview

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

4

2 回答 2

3

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

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-23T19:41:07.747 回答
0

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

searchResults.resultsData = data;

你能试试像

searchResults.resultsData.length=0;
angular.forEach(data,function(item){
    searchResults.resultsData.push(item);
});
于 2013-09-23T14:57:09.760 回答