Question

我有一个带有滚动指令的AngularJS应用程序，实现如下： http://jsfiddle.net/un6r4wts/

app = angular.module('myApp', []);

app.run(function ($rootScope) {

    $rootScope.var1 = 'Var1';
    $rootScope.var2 = function () { return Math.random(); };

});

app.directive("scroll", function ($window) {
    return function(scope, element, attrs) {
        angular.element($window).bind("scroll", function() {
            if (this.pageYOffset >= 100) {
                 scope.scrolled = true;
            } else {
                 scope.scrolled = false;
            }
            scope.$apply();
        });
    };
});

HTML看起来如下：

<div ng-app="myApp" scroll ng-class="{scrolled:scrolled}">
    <header></header>
    <section>
        <div class="vars">
        {{var1}}<br/><br/>
        {{var2()}}
        </div>
    </section>
</div>

一旦页面滚动超过100px，我只希望将滚动的类添加到div中。哪个工作正常，但我只希望这种情况发生！我不希望重新渲染整个范围。所以在滚动时不应该执行函数var2（）。不幸的是，它是。

有没有办法让angular只执行绑定到window元素的函数而不重新渲染整个范围，或者我在这里误解了AngularJS的基本内容？

看到这个小提琴： http://jsfiddle.net/un6r4wts/

编辑：这似乎是一个关于类似问题的话题： Angularjs scope.$apply in directive's on scroll listener

Answer 1

如果您只想计算一次表达式，可以在前面添加＆＃39; ::＆＃39;，这样做就是这样。在一次性绑定下的文档中查看： https://docs.angularjs.org/guide/expression

注意，这需要角度1.3 +。

计算表达式的原因是因为当您更改范围上的属性值时，脏检查将启动并评估所有监视以进行脏检查。当视图在某个范围变量上使用{{}}时，它会创建一个绑定（与监视一起出现）。

AngularJS滚动指令 - 如何防止重新渲染整个范围

1 个答案: