Binding to events in a directive which is inside a ng-view doesn't work

问题

I have an AngularJS application, which hasn't been using the built in routing before now. I am refactoring the site, so it will be a SPA.

To do this I have change the app to use ng-view to switch between the different pages, instead of just having the server serve the different controllers

After this is done my endless scroll suddenly stopped working.

I have a directive which looks like this:

directiveModule.directive('whenScrolled', ['$window', function($window) {
    return function(scope, element, attr) {
        var raw = element[0];

        angular.element($window).bind('scroll', function() {
            console.log('test');

            scope.$apply(attr.whenScrolled);
        });
        };
}]);

But now the scroll event is never fired.

If I take angular.element($window).bind('scroll', function() {..}); out and uses it in the controller instead it works fine, but it just seems like a hack.

Is there any way to bind to the page scroll event inside a directive, which is inside a controller, which is inside a ng-view?

回答1:

Are you sure the element with the directive which is inside the controller and then the ng-view is added to the DOM?

More code (A Fiddle) would help.

来源：https://stackoverflow.com/questions/18088283/binding-to-events-in-a-directive-which-is-inside-a-ng-view-doesnt-work