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：指令和外部控制器

回答

相關問題