Question

我试图在我的AngularJS网络应用上将滚动事件绑定到我的div

我的div id是#roll-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具有适当的高度，并且在restrict属性
中为属性定义了指令

请更新此

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

编辑：

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

并且在指令函数中它也是不同的参数数量。

Answer 2

尝试在警告声明后添加scope.$apply();。

绑定滚动事件不适用于AngularJS

2 个答案: