AngularJS directive scope function not being called

Question

I have created the following directive:

app.directive("autoLoad", function ($window) {
    return { 
        scope: {
            do: '&'
        },
        link : function(scope, element, attrs) {
            var scroller = element[0];
            angular.element($window).bind("scroll", function() {
                if(($(window).scrollTop() + $(window).height()) > ($(document).height() - 100)) {
                    console.log("GOT HERE!");
                    scope.do(); // LOAD POSTS
                }
            });
        }
    };
});

This directive should call the do function when the user scrolls to the bottom of the page. This is the div that uses the directive:

<body ng-app="storeApp" layout="row" ng-controller="MainCtrl" ng-cloak">
...
<div flex layout="column" tabIndex="-1" role="main"
    class="md-whiteframe-z2" auto-Load do="doSomething()">

The controller looks like this:

app.controller("HomeCtrl", function($scope, controllerManager) {
    ...

    $scope.doSomething = function() {
        console.log("PLEASE WORK!");
    };
});

When I reach the bottom of the page, GOT HERE is being printed, but the second statement is never shown. Why is the function in the controller not being called?

EDIT: I am using tabs, each of which has a different controller. So the main controller that is applied to the body object, actually does not have the doSomething function inside it:

app.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider.state('home', {
        url : "/home",
        templateUrl : "main.html",
        controller : 'HomeCtrl'
    }).state('top', {
        url : "/top",
        templateUrl : "main.html",
        controller : 'TopCtrl'
    }).state('trending', {
        url : "/trending",
        templateUrl : "main.html",
        controller : 'TrendingCtrl'
    })
    $urlRouterProvider.otherwise('/home');
});

app.controller("MainCtrl", function($scope, $location, $log) {
    $scope.selectedIndex = 0;
    $scope.$watch('selectedIndex', function(current, old) {
        switch (current) {
        case 0:
            $location.url("/home");
            break;
        case 1:
            $location.url("/top");
            break;
       case 2:
            $location.url("/trending");
            break;
        }
    });
});

The do something function is actually part of each of the sub controllers: HomeCtrl, TopCtrl etc.

The problem seeems to be that the scope is defined by the MainCtrl rather than whatever tab it is currently on. How can this be changed?

first of all fix some issues. "auto-load" instead of "auto-Load" in your HTML, restrict your directive in the right way — Develobba, Feb 25 '16 at 13:24
See in this Link http://stackoverflow.com/questions/17583004/angularjs-call-a-controller-function-from-a-directive-without-isolated-scope — Ravi Kapupara, Feb 25 '16 at 13:29
@CodeNashor because of the way browser work, casing information is lost on attribute names, so you can in fact use `auto-Load` — vittore, Feb 25 '16 at 13:29

vittore · Accepted Answer · 2016-02-25T13:38:24.120

1

First , you really need to use service or factory for that, but if you still want to use expression binding, move your code from link function to directive controller ( see jsbin https://jsbin.com/nohotizefi/edit?html,js,output)

 app.directive("autoLoad", function ($window) {
return { 
    scope: {
        do: '&'
    },
    controller : function($scope, $element) {
        var scroller = $element;
        angular.element($window).bind("scroll", function() {
            if(($(window).scrollTop() + $(window).height()) > ($(document).height() - 100)) {
                console.log("GOT HERE!");
                $scope.do(); // LOAD POSTS
            }
        });
    }
};

});

edited Feb 25 '16 at 13:38

answered Feb 25 '16 at 13:25

vittore

17,449
6
44
82

I get an error on this line: var scroller = scope.el; Saying scope is undefined. – user3024235 Feb 25 '16 at 13:36
It is still only printing the first thing. I also tried $scope.$eval($scope.do()). – user3024235 Feb 25 '16 at 13:46
I have edited the question with some relevant information. I am using multiple controllers, this may change things. – user3024235 Feb 25 '16 at 13:58

AngularJS directive scope function not being called

1 Answers1