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

Question

我正在尝试编写一条指令，该指令返回一个布尔值，该布尔值在用户在特定容器上滚动时为true，在用户不滚动时为false。 我这样做的原因是，当我将console.log放入所使用的element.bind（'scroll'）时，可以看到Boolean正确切换，但是它不会影响我在之外设置的同名作用域变量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更新：小提琴

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-08-23 04:42:50

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-08-23 04:42:50

解决方案1
1 已采纳 2017-08-23 04:42:50