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 — Eigi
– Eigi, Commented Feb 25, 2016 at 13:24
@CodeNashor because of the way browser work, casing information is lost on attribute names, so you can in fact use auto-Load — vittore
– vittore, Commented Feb 25, 2016 at 13:29

vittore · Accepted Answer · 2016-02-25 13:38:24Z

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, 2016 at 13:38

answered Feb 25, 2016 at 13:25

vittore

17.6k6 gold badges46 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3024235 Over a year ago

I get an error on this line: var scroller = scope.el; Saying scope is undefined.

user3024235 Over a year ago

It is still only printing the first thing. I also tried $scope.$eval($scope.do()).

user3024235 Over a year ago

I have edited the question with some relevant information. I am using multiple controllers, this may change things.

Collectives™ on Stack Overflow

AngularJS directive scope function not being called

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related