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 ResultsController
and 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屋!