指令与分离范围在AngularJS控制器通信 [英] Directive with isolate scope communicate with controller in AngularJS
问题描述
我看过一些类似的回答我的问题,如<一个href=\"http://stackoverflow.com/questions/13092720/how-to-pass-data-from-the-isolate-scope-to-the-parent-scope\">this 之一,虽然不能将它翻译成我自己的要求 - 来自缺乏了解...
I've read some similar answers to my question, such as this one though can't translate it to my own requirements - comes from a lack of understanding...
我有一个控制器:
appControllers.controller('TransactionsCtrl', ['$scope', 'InfiniteScrollingDataService', function ($scope, dataService) {
// setup our scope properties
$scope.$root.title = 'Transactions';
var urlQuery = {
skip: 0,
take: 25,
search: '',
order: 'DateTimeCreated',
orderBy: 'desc',
transactionTypeID: null,
transactionStatusID: null
};
var apiUrl = 'api/transactions';
$scope.transactions = new dataService(apiUrl, urlQuery);
$scope.Filter = function (senderParent, type, id) {
$scope.FilterApplied = true;
console.log('filter in controller: ' + senderParent + ' ' + type + ' ' + id);
}
}]);
和我有一个指令:
appDirectives.directive('bootstrapListItems', ['$rootScope', function ($rootScope) {
return {
restrict: 'A',
templateUrl: 'bootstrapDropDownItems.html',
link: function (scope, element, attrs) {
scope.type = attrs.useGlobaljsonObject;
scope.parentElement = attrs.id;
scope.items = [];
var obj = $rootScope.globalJSON[scope.type];
for (o in obj) {
scope.items.push({ key: o, value: obj[o] })
}
}
}
}]);
和我的指令模板:
<script type="text/ng-template" id="bootstrapDropDownItems.html">
<li class="active"><a href="#" class="lnkFilterList">- Any -</a></li>
<li ng-repeat="item in items">
<a href="#" class="lnkFilterList" ng-click="Filter(parentElement, type, item.key)">{{item.value}}</a>
</li>
</script>
如果我不隔离指令则控制器正确调用的范围,我看到控制台登出我的论点。
If I don't isolate the scope of the directive then the controller is called correctly, and i see the console logging out my arguments.
不过,我(想)我需要范围的隔离一样会有这个指令在页面上的倍数。
However, I (think) I need to isolate the scope as there will be multiples of this directive on the page.
当我添加范围:{}
来我的指令控制器功能不再调用。
when I add scope: {}
to my directive the controller function is no longer called.
我也试图改变我的 NG-点击
到 NG-点击=$ parent.Filter(.....)
- 这剪掉似乎任何工作
I also tried changing my ng-click
to ng-click="$parent.Filter(.....)"
- that didnt' seem to work either.
任何人都可以请点我在正确的方向?
Can anybody please point me in the right direction?
推荐答案
NG-点击=$ parent.Filter(.....)
不是工作,因为你拥有了它在 NG-重复
这也创造了一个(非隔离)的范围。在这种情况下,你会写
ng-click="$parent.Filter(.....)"
isn't working because you have it in an ng-repeat
which also creates a (non-isolated) scope. In that case you would have to write
ng-click="$parent.$parent.Filter(.....)"
但不这样做...
but don't do that...
您可以发出的单击事件处理程序的事件,并在控制器听吧。
You could emit an event in the click event handler and listen for it in your controller.
<script type="text/ng-template" id="bootstrapDropDownItems.html">
<li class="active"><a href="#" class="lnkFilterList">- Any -</a></li>
<li ng-repeat="item in items">
<a href="#" class="lnkFilterList" ng-click="onClick(parentElement, type, item.key)">{{item.value}}</a>
</li>
</script>
指令:
appDirectives.directive('bootstrapListItems', ['$rootScope', function ($rootScope) {
return {
restrict: 'A',
templateUrl: 'bootstrapDropDownItems.html',
link: function (scope, element, attrs) {
scope.type = attrs.useGlobaljsonObject;
scope.parentElement = attrs.id;
scope.items = [];
var obj = $rootScope.globalJSON[scope.type];
for (o in obj) {
scope.items.push({ key: o, value: obj[o] })
}
scope.onClick = function(){
// pass an array of original arguments to the event
scope.$emit('someEventName', Array.prototype.slice.call(arguments));
};
}
}
}]);
控制器:
appControllers.controller('TransactionsCtrl', ['$scope', 'InfiniteScrollingDataService', function ($scope, dataService) {
// setup our scope properties
$scope.$root.title = 'Transactions';
var urlQuery = {
skip: 0,
take: 25,
search: '',
order: 'DateTimeCreated',
orderBy: 'desc',
transactionTypeID: null,
transactionStatusID: null
};
var apiUrl = 'api/transactions';
$scope.transactions = new dataService(apiUrl, urlQuery);
$scope.$on('someEventName', function(e, args){
// call the $scope.Filter function with the passed array of arguments
$scope.Filter.apply(null, args);
});
$scope.Filter = function (senderParent, type, id) {
$scope.FilterApplied = true;
console.log('filter in controller: ' + senderParent + ' ' + type + ' ' + id);
}
}]);
这篇关于指令与分离范围在AngularJS控制器通信的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!