Question

我在递归指令的模板中使用ng-click。但不行。

当我点击'root loading more按钮'时，它可以工作，但是'child loading more按钮'不起作用，以及如何将ngclick through指令中的子对象传递给控制器范围并控制它。

HTML

<div ng-app='demoA'>
    <div ng-controller="IndexCtrl">
        <collection collection='tasks' reply-msg="replyMsg(data)" load-more="loadMore()">
        </collection>
    </div>
</div>

收集指令

.directive('collection', function () {
    return {
        restrict: "E",
        replace: true,
        scope: {
            collection: '=',
            member: '=',
            replyMsg: '&',
            loadMore: '&'
        },
        template: "<ul><member ng-repeat='member in collection track by $index' floor='$index + 1' member='member' reply-msg='replyMsg({data: member.name})'></member><li><input type='button' value='load more...' ng-click='loadMore()' /></li></ul>"
    }
})

会员指令

.directive('member', function ($compile) {
    return {
        restrict: "E",
        replace: true,
        scope: {
           floor: '=',
           member: '=',
           replyMsg: '&',
           loadMore: '&'
        },
        template: "<li>" + 
                "<div ng-if='member.isReply'>#{{floor}}</div>" + 
                "<div>{{member.name}}</div>" + 
                "<div ng-if='!member.isReply'><input type='button' value='Reply' ng-click='replyMsg({data: member.name})'/></div>" + 
  "</li>",
        link: function (scope, element, attrs) {
            if (angular.isArray(scope.member.children)) {
                element.append("<collection collection='member.children' reply-msg='replyMsg({data: member.name})' load-more='loadMore()'></collection>"); 
                $compile(element.contents())(scope)
            }
        }
    }
})

例如，

当我点击'root load more按钮'时，它通过指令控制器范围和控制台作为对象包括“欧洲”和“南美洲”。

当我点击'子加载更多按钮'时，它通过指令到控制器范围和控制台作为对象包括“意大利”和“西班牙”。

Answer 1

我想我修好了，请参阅this更新的JSFiddle。

问题在于您未将loadMore和replyMsg函数作为子指令的引用传递。相反，你这样调用它们：load-more="loadMore()"。这应该只在ng-click中完成。我还在传递方法的指令中将'&'更改为'='。

HTML

<div ng-app='demoA'>
    <div ng-controller="IndexCtrl">
    <collection collection='tasks' reply-msg="replyMsg" load-more="loadMore">
    </collection>
    </div>
</div>

的JavaScript

angular.module('demoA', [])
    .directive('collection', function () {
        return {
            restrict: "E",
            replace: true,
            scope: {
                collection: '=',
                member: '=',
                replyMsg: '=',
                loadMore: '='
            },
            template: "<ul>" + 
                "<member ng-repeat='member in collection track by $index' floor='$index + 1' member='member' reply-msg='replyMsg' load-more='loadMore'></member>" + 
                "<li><input type='button' value='load more...' ng-click='loadMore()' /></li>" + 
            "</ul>"
        }
    })
    .directive('member', function ($compile) {
        return {
            restrict: "E",
            replace: true,
            scope: {
                floor: '=',
                member: '=',
                replyMsg: '=',
                loadMore: '='
            },
            template: "<li>" + 
            "<div ng-if='member.isReply'>#{{floor}}</div>" + 
            "<div>{{member.name}}</div>" + 
            "<div ng-if='!member.isReply'><input type='button' value='Reply' ng-click='replyMsg({data: member.name})'/></div>" + 
            "</li>",
            link: function (scope, element, attrs) {
                if (angular.isArray(scope.member.children)) {
                    element.append("<collection collection='member.children' reply-msg='replyMsg' load-more='loadMore'></collection>"); 
                    $compile(element.contents())(scope)
                }
            }
        }
    })

    .controller('IndexCtrl', function ($scope) {
        $scope.replyMsg = function(data) {
            alert(data);
        };
        $scope.loadMore = function() {
            alert("clicked");
        };
        $scope.tasks = [
            {
                name: 'Europe',
                children: [
                    {
                        name: 'Italy',
                        isReply: true,
                    }, 
                    {
                        name: 'Spain',
                        isReply: true,
                    }
                ]
            }, 
            {
                name: 'South America',
                children: []
            }
        ];
    });

如何修复ng-click在递归指令模板

1 个答案: