我已经阅读了一些与我的问题类似的答案,例如这个答案虽然无法将其转化为我自己的要求 - 来自缺乏理解......
我有一个控制器:
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>如果我没有隔离指令的范围,那么控制器被正确调用,我看到控制台注销了我的参数。
但是,我(想)我需要隔离范围,因为页面上会有多个此指令。
当我将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:
<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.
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事件处理程序中发出事件并在控制器中侦听它。
<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); } }]);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>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); } }]);更多推荐
发布评论