0
我想在另一個指令中使用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」作爲父範圍。任何援助非常感謝！