javascript - 从嵌套指令中的链接函数调用 Controller 函数

Question

我正在尝试在另一个指令中使用lazyLoad指令。问题是我无法弄清楚如何在 Controller 中调用“loadMore”函数，因为它永远不会触发。

这是主要指令:

    angular.module('ssq.shared').directive('checkboxPicklist', function() {
    return {
        restrict: 'E',
        templateUrl: '/SSQV4/SSQV5/Scripts/app/Shared/directives/checkboxPicklist.html',
        replace: true,
        scope: {
            itemId: '=',
            list: '=',
            nameProp: '=',
            title: '@',
            searchPlaceholder: '@',
            callbackFn: '&'
        },
        link: function (scope, element, attrs) {
            scope.query = '';

            var child = element.find('.dropdown-menu');
            child.on({
                'click': function(e) {
                    e.stopPropagation();
                }
            });

            var selectedItemFn = function (item) {
                return item.selected;
            };

            scope.getSelectedCount = function() {
                return _.filter(scope.list, selectedItemFn).length;
            };

            scope.allSelected = function(list) {
                var newValue = !scope.allNeedsMet(list);
                _.each(list, function(item) {
                    item.selected = newValue;
                    scope.callbackFn({ object: item });
                });
            };

            scope.allNeedsMet = function(list) {

                var needsMet = _.reduce(list, function(memo, item) {
                    return memo + (item.selected ? 1 : 0);
                }, 0);
                if (!list) {
                    return (needsMet === 0);
                }
                return (needsMet === list.length);
            };
        }
    };
});

})();

这是lazyLoad指令:

app.directive('lazyLoad', function () {
return {
    restrict: 'A',
    scope: { 'loadMore': '&' },
    link: function (scope, elem) {
        var scroller = elem[0]
        $(scroller).bind('scroll', function () {
            if (scroller.scrollTop + scroller.offsetHeight >= scroller.scrollHeight) {
                scope.$apply('loadMore()')
            }
        })
    }
}

});

这是我的 Controller 功能:

    $scope.loadMore = function () {
    indServices = indServices + 10
    var r = 10
    if (ind + 10 >= $scope.buffer.Services.length) {
        r = $scope.buffer.Services.length - ind
    }

}

这是我的 HTML:

<div class="pec-checkbox-picklist btn-group btn-group-picklist">
<button id="{{itemId}}" class="form-control dropdown-toggle" data-toggle="dropdown">
    <span class="cbpl-btn-text">{{ getSelectedCount() }} {{ title }}</span><span class="caret"></span>

</button>
<ul class="dropdown-menu dropdown-menu-complex" data-complex-menu style="overflow-y: scroll" lazy-load>

    <li class="list-group-item search-item">
        <input class="form-control" type="text" placeholder="{{ searchPlaceholder }}" ng-model="query" />
        <button type="button" class="btn btn-small" ng-show="query" ng-click="query = undefined">clear</button>
    </li>
    <li class="divider" ng-hide="query"></li>
    <li class="list-group-item" ng-hide="query">
        <label class="checkbox">
            <input type="checkbox" ng-click="allSelected(list)" ng-checked="allNeedsMet(list)">
            Select All
        </label>
    </li>
    <li class="divider"></li>
    <li class="list-group-item" ng-repeat="item in list | searchFilter:nameProp:query">
        <label class="checkbox" title="{{ item[nameProp] }}">
            <input type="checkbox" ng-model="item.selected" ng-change="callbackFn({object: item})">
            {{ item[nameProp] }}
        </label>
    </li>

</ul>

当lazyLoad指令命中scope.$apply('loadMore())时，它永远不会执行该函数，因为它将另一个指令“checkboxPicklist”视为父范围。非常感谢任何帮助!

Answer 1

lazy-load 指令没有 load-more 属性。父范围的 loadMore 方法不会传递给它。它应该与

一起使用

<... lazy-load load-more="loadMore()">