Call Controller Function from link function in Nested Directive

Question

I am trying to use a lazyLoad directive in another directive. The problem is I cannot figure out how to call the 'loadMore' function in the Controller as it never fires.

Here is the Main Directive:

    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);
            };
        }
    };
});

})();

Here is the lazyLoad Directive:

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()')
            }
        })
    }
}

});

Here is my Controller Function:

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

}

Here is my HTML:





    
        
        
    
    
    
        
            
            Select All
        
    
    
    
        
            
            {{ item[nameProp] }}

When the lazyLoad directive hits scope.$apply('loadMore()) it never executes the function as it sees the other directive "checkboxPicklist" as the parent scope. Any assistance is greatly appreciated!

Rani Radcliff · Accepted Answer

This required changes in the parent directive js file, the parent directive html file, and the parent html page. In the html template of the parent directive, I had to add load-more="loadMore()" on the line with the lazyload directive. So it looks like this:

   
    
    
        
            
            
        
        
        
            
                
                Select All
            
        
        
        
            
                
                {{ item[nameProp] }}

However, calling loadMore() here just switched the scope to the parent directive. It still did not hit the function in the main controller. So, to it, I then had to add call-More():

    scope: {
        itemId: '=',
        list: '=',
        nameProp: '=',
        title: '@',
        searchPlaceholder: '@',
        callbackFn: '&',
        callMore: '&'
    },
            scope.loadMore = function () {
            scope.callMore();
        };

Then to the Html page where that directive is used, I had to add call-more="loadMore()" to actually finally hit the $scope.loadMore function in my main controller. Because the directive is a repeat, I had to add a specific loadMore() to each picklist as below:

    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);
    });

The finished HTML on the Main page:

Thanks Estus, as your response helped to put me on the correct path. I hope I explained this well enough to help someone else. Happy coding!

Call Controller Function from link function in Nested Directive

Answers (2)

Related Questions