如何修复 ng-click 在递归指令模板中不起作用

Question

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

这里是代码https://jsfiddle.net/qxz7506n/

当我单击“根加载更多按钮”时，它可以工作，但“子加载更多按钮”不起作用，以及如何通过指令将 ngclick 内的子对象传递到控制器范围并对其进行控制台。

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 button'时，它通过指令将控制器范围和控制台作为对象包括“欧洲”和“南美”。

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

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