嵌套指令中的链接函数的呼叫控制器函数
问题描述：
我想在另一个指令中使用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()')
}
})
}
}
}）;
这里是我的控制器功能：
$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”作为父范围。任何援助非常感谢！
答
这需要更改父指令js文件，父指令html文件和父级html页面。在父指令的html模板中，我必须使用lazyload指令添加load-more="loadMore()"。所以它看起来像这样：
<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 load-
more="loadMore()">
<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>
</div>
但是，调用loadMore()这里只是切换范围父指令。它仍然没有打到主控制器的功能。所以，它，然后我不得不添加call-More()：
scope: {
itemId: '=',
list: '=',
nameProp: '=',
title: '@',
searchPlaceholder: '@',
callbackFn: '&',
callMore: '&'
},
scope.loadMore = function() {
scope.callMore();
};
然后在使用该指令的HTML页面时，我不得不添加call-more="loadMore()"真正终于在我的主控制器命中$scope.loadMore功能。由于该指令是重复的，我有一个特定的loadMore()添加到如下每个选择列表：
scope.loadMoreServices = function() {
indServices = indServices + 10;
var r = 10;
if (indServices + 10 >= $scope.buffer.Services.length) {
r = $scope.buffer.Services.length - indServices;
}
$scope.services = $scope.services.concat($scope.buffer.Services.slice(indServices, r + indServices));
};
$scope.loadMoreAreas = function() {
indAreas = indAreas + 10;
var r = 10;
if (indAreas + 10 >= $scope.buffer.Areas.length) {
r = $scope.buffer.Areas.length = indAreas;
}
$scope.areas = $scope.areas.concat($scope.buffer.Areas.slice(indAreas, r + indAreas));
};
$scope.loadMoreVerifications = function() {
indVerifications = indVerifications + 10;
var r = 10;
if (indVerifications + 10 >= $scope.buffer.Verifications.length) {
r = $scope.buffer.Verifications.length = indVerifications;
}
$scope.verifications = $scope.verifications.concat($scope.buffer.Verifications.slice(indVerifications, r +
indVerifications));
};
$scope.loadMoreSubscriptions = function() {
indSubscriptions = indSubscriptions + 10;
var r = 10;
if (indSubscriptions + 10 >= $scope.buffer.Subscriptions.length) {
r = $scope.buffer.Subscriptions.length = indSubscriptions;
}
$scope.subscriptions = $scope.subscriptions.concat($scope.buffer.Subscriptions.slice(indSubscriptions, r +
indSubscriptions));
};
$scope.$watch('buffer', function() {
indServices = 0;
indAreas = 0;
indVerifications = 0;
indSubscriptions = 0;
$scope.services = $scope.buffer.Services.slice(0, 10);
$scope.areas = $scope.buffer.Areas.slice(0, 10);
$scope.verifications = $scope.buffer.Verifications.slice(0, 10);
$scope.subscriptions = $scope.buffer.Subscriptions.slice(0, 10);
});
主页上完成的HTML：
<checkbox-picklist data-item-id="'servicesPicklist'"
data-search-placeholder="Search Services"
data-list="services"
data-title="Service(s)"
data-name-prop="'vchDescription'"
data-callback-fn="addService(object)"
call-more="loadMoreServices()">
</checkbox-picklist>
</div>
<div class="col-sm-6 col-md-6 col-lg-3">
<checkbox-picklist data-item-id="'areasPicklist'"
data-search-placeholder="Search Areas"
data-list="areas"
data-title="State(s)/Province(s)"
data-name-prop="'vchStateLongName'"
data-callback-fn="addArea(object)"
call-more="loadMoreAreas()">
</checkbox-picklist>
</div>
<div class="col-sm-6 col-md-6 col-lg-3">
<checkbox-picklist data-item-id="'verificationsPicklist'"
data-search-placeholder="Search Verifications"
data-list="verifications"
data-title="Verification(s)"
data-name-prop="'vchDescription'"
data-callback-fn="addVerification(object)"
call-more="loadMoreVerifications()">
</checkbox-picklist>
</div>
<div class="col-sm-6 col-md-6 col-lg-3">
<checkbox-picklist data-item-id="'subscriptionsPicklist'"
data-search-placeholder="Search Subscriptions"
data-list="subscriptions"
data-title="Subscription(s)"
data-name-prop="'vchDescription'"
data-callback-fn="addSubscription(object)"
call-more="loadMoreSubscriptions()">
</checkbox-picklist>
感谢Estus，因为你的反应帮助把我放在正确的道路上。我希望我解释得很好，可以帮助别人。快乐的编码！
答
lazy-load指令没有load-more属性。父范围的方法不会传递给它。它应该与
<... lazy-load load-more="loadMore()">