Question

我正在尝试编写一个返回布尔值的指令，该布尔值在用户滚动特定容器时为true，在不滚动时为false。我有这个工作，当我在我正在使用的element.bind（'scroll'）中抛出一个console.log时，我可以正确地看到布尔切换，但它不影响我在外面设置的同名的范围变量element.bind。如果你看一下我把这个JSFiddle放在一起，你可以看到这种情况：https://jsfiddle.net/hurgledurf/bwyyL7mj/

这是我对该指令的代码：

(function() {
    'use strict';
    angular
        .module('myWebPage')
        .directive('scrollingDirective', scrollingDirective);

    function scrollingDirective() {
        var directive = {
            restrict: 'AE',
            link: link
        };
        return directive;

        function link (scope, element, attributes) {
            scope.actuallyScrolling = true;
            var timer;
            element.bind('scroll', function () {
                scope.actuallyScrolling = true;
                console.log('USER IS SCROLLING ', scope.actuallyScrolling);
                clearTimeout(timer);
                setTimeout(function () {
                    scope.actuallyScrolling = false;
                    console.log('INSIDE TIMER ', scope.actuallyScrolling);
                }, 1000);
            })
        }

    }
})();

这是我作为一个例子汇总的一些基本HTML：

<body ng-app="myWebPage">
  <div class="container" scrolling-directive>
    <p>
    scroll and check the console.log!
    Scrolling Boolean: {{actuallyScrolling}}
    </p>
  <div class="filler"></div>
  </div>
</body>

如果您查看JS Fiddle，您可以看到scope.actuallyScrolling变量在console.log中打开和关闭，但在DOM上没有更改。这让我觉得存在一些我没有想到的范围问题，Angular将它们视为两个独立的变量。有人对此有任何见解吗？谢谢。

Answer 1

您可以使用scope.$apply()手动初始化scope更新：fiddle

Angular：无法在我的angular指令中访问element.bind中的变量，因此我可以用它来操作DOM

1 个答案: