binding scroll event doesn't work on AngularJS

Question

I'm trying to bind the scroll event to my div on my AngularJS web app

My div id is #scroll-box and is scrollable from the browser. That's the code I'm using inside my link function:

element.on('scroll', '#scroll-box', function () {
    alert("ok!!!");
});

However the alert() function doesn't fire at all

My div:

<div class="scrollBox" id="scroll-box">
    <table class="messages-body" >
        <tbody ng-repeat="messageGroup in messageData" class="message-group-body">
            <tr class="{{ 'message-group groupNo' + messageGroup.id}}">
                <th class="message-group-date" colspan="3">{{ ::messageGroup.dateHead }}</th>
            </tr>
            <tr class="{{mess.class + mess.selected}}"  ng-repeat="mess in messageGroup.messages | limitTo:totalDisplayed" ng-click="onMessageSelection(mess.msgIdx, mess.indicatorIdx, messageGroup.id, mess.idxInGroup)">
                    <th>{{ mess.timestamp }}</th>
                    <td>{{ mess.text }}</td>
            </tr>
        </tbody>
    </table>
</div>

If I put the onscroll="alert('ok!!!');" straight into the div tag I see the alert box

EDIT

this is the relative directive script

(function() {
    angular
        .module("app")
        .directive("etChannelPanel", ["chartData", "chartView", "channelPanel", "chartUrl", "$location", "$rootScope", etChannelPanel]);

    function etChannelPanel(chartData, chartView, peer, chartUrl, $location, $rootScope) {

        var titles = {
            none    : "Visible Area",
            point   : "Selected Point",
            area    : "Selected Area",
            bucketPoint : "Selected Range"
        };

        var link = function(scope, element, attr) {
            scope.loaded    = false;
            scope.chartData = chartData;

            scope.$watch("chartData.selectedIndicator", function(){
                if (chartData.selectedIndicator != -1)
                {
                    if (typeof scope.expandMessages === 'undefined' || scope.expandMessages == false)
                    {
                        scope.onExpandMessages();
                    }
                }
            }, true);

            scope.chartView = chartView;

            scope.$watch("chartView.selection", function() {
                if (chartView.selection && chartData.chartAttrs && chartData.segments) {
                    updateChannelPanel();
                }
            });

            var highlightChangedListener = $rootScope.$on("highlightChanged", function() {
                updateChannelPanel();
            });


            scope.totalDisplayed = 50;

            var loadMore = function () {
                scope.totalDisplayed += 50;  
            };

            element.on('scroll', '#scroll-box', function () {
                alert("ok!!!");
            });




        return {
            link:           link,
            restrict:       "E",
            templateUrl:    "directives/etChannelPanel.html",
            replace:        true
        };
    }

})();

Answer 1

Add directive et-channel-panel to your html element

for which you expecting to trigger the scroll. a

<div class="scrollBox" id="scroll-box" et-channel-panel>

Your JS,should be like this

element.bind('scroll', function () {
                alert("ok!!!");
            });

Note : make sure the above div have proper height and directive is defined for attribute in the restrict property

Please update this one

restrict:       "AE", //assuming u want both element and attribute

EDIT :

directive("etChannelPanel", ["chartData", "chartView", "channelPanel", "chartUrl", "$location", "$rootScope", etChannelPanel])

and in the directive function it is different and number of parameter as well.

Answer 2

Try adding scope.$apply(); after the alert statement.