How to call angular component function from out side directives

Question

I am using angularjs 1.5.8 , Which I craete component name as Group using group module , same i create directive of same module as component named as scroll , I am in require to call the component function that is loadmoregroups to call api there to get more groups on scroll, at the bootom.

    angular.module('group', []).
        component('group', {
            templateUrl: '/djangotemplates/private/group/list.html',
            controller: function(
                    $cookies,
                    $http,
                    $location,
                    $scope,
                    Flash,
                    $animate,
                    Group,
                    $timeout,
                    $rootScope
                ){

                $rootScope.loadMoreGroups =function()
                {
                    alert("loadmore");
                }
        }
}).directive('scroll', function() {
    return {
        restrict: 'A',
        link: function(rootScope, element, attrs, $window, $scope, $document) {
            var bind = element.bind('tbody');
            var raw = element[0];
            angular.element(bind).on("scroll", function() {
                //console.log('in scroll mode');

                if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {

                    **rootScope.loadMoreGroups();** //unable to call this `enter code here`function

                }
            });
        }
    };
});

The best practice is to avoid using rootScope with functions. See more here: http://stackoverflow.com/questions/32761540/why-using-rootscope-with-functions-is-not-recommended — AmeRyoki, Mar 21 '17 at 07:10

score 2 · Accepted Answer · answered Mar 21 '17 at 07:07

i don't know whether this is the best way but you can use broadcast to call parent component from child component.

 if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
     $scope.$broadcast("call_func")
 }

component

.component('group', {
    templateUrl: '/djangotemplates/private/group/list.html',
    controller: function(
        $cookies,
        $http,
        $location,
        $scope,
        Flash,
        $animate,
        Group,
        $timeout,
        $rootScope
    ) {
        $rootScope.loadMoreGroups = function() {
            alert("loadmore");
        }
        $scope.$on("call_func", function(ev) {
            $rootScope.loadMoreGroups()
        })
    }
})

nice make sure to mark as right answer if this helped :D – Sachila Ranawaka Mar 21 '17 at 10:51 — Sachila Ranawaka, Mar 21 '17 at 10:51

How to call angular component function from out side directives

1 Answers1