具有隔离范围的指令与AngularJS中的控制器通信(Directive with isolate scope communicate with controller in AngularJS)

我已经阅读了一些与我的问题类似的答案，例如这个答案虽然无法将其转化为我自己的要求 - 来自缺乏理解......

我有一个控制器：

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

以及我的指令的模板：

如果我没有隔离指令的范围，那么控制器被正确调用，我看到控制台注销了我的参数。

但是，我（想）我需要隔离范围，因为页面上会有多个此指令。

当我将scope: {}添加到我的指令时，不再调用控制器函数。

我也尝试将我的ng-click更改为ng-click="$parent.Filter(.....)" - 这似乎也不起作用。

任何人都可以指出我正确的方向吗？

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...

I have a controller:

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

And I have a directive:

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

And the template for my directive:

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.

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-click="$parent.Filter(.....)"无效，因为你在ng-repeat中创建了一个（非隔离的）范围。在那种情况下，你必须写

ng-click="$parent.$parent.Filter(.....)"

但不要这样做......

您可以在click事件处理程序中发出事件并在控制器中侦听它。

指示：

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

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.

directive:

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

controller:

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

更多推荐