指令与分离范围在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屋！