綁定滾動事件在AngularJS上不起作用

Question

我正在嘗試將滾動事件綁定到AngularJS Web應用程序上的div

我的div ID是＃scroll-box，可以從瀏覽器滾動。 那是我在鏈接函數中使用的代碼：

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

但是alert()函數根本不會觸發

我的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>

如果我把onscroll="alert('ok!!!');" 直接進入div標簽，我看到警報框

編輯

這是相對指令腳本

(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

將指令et-channel-panel添加到您的html元素

您希望為其觸發滾動的對象。 一種

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

您的JS應該是這樣

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

注意：請確保上述div具有適當的高度，並在strict屬性中為該屬性定義了指令

請更新這個

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

編輯：

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

在指令函數中，它也不同，並且參數的數量也不同。

Answer 2

嘗試添加scope.$apply(); 警報聲明之后。