如何使用$scope $watch和$scope $apply in AngularJS?

前端之家收集整理的这篇文章主要介绍了如何使用$scope $watch和$scope $apply in AngularJS?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我不明白如何使用$ scope。$ watch和$ scope。$ apply。官方文档没有帮助。

我不明白的是:

>他们是否连接到DOM?
>如何更新对模型的DOM更改?
>它们之间的连接点是什么?

我试了this tutorial,但它需要理解$ watch和$ apply是理所当然的。

$ apply和$ watch做什么,如何正确使用它们?

你需要知道AngularJS如何工作以了解它。

摘要周期和$范围

首先,AngularJS定义了所谓的摘要循环的概念。这个循环可以被认为是一个循环,在此循环期间,AngularJS检查所有$ scope所监视的所有变量是否有任何变化。因此,如果你在你的控制器中定义了$ scope.myVar,并且这个变量被标记为被监视,那么你隐含地告诉AngularJS在循环的每次迭代中监视myVar的变化。

一个自然的后续问题是:是否所有附加到$ scope的都被监视?幸运的是,没有。如果你要监视$ scope中每个对象的变化,那么很快,一个摘要循环需要花费很长时间来评估,你很快就会遇到性能问题。这就是为什么AngularJS团队给我们两种方法来声明一些$ scope变量作为被监视(阅读下面)。

$ watch有助于监听$ scope更改

有两种方法可以将$ scope变量声明为被监视。

>通过表达式 {{myVar}}在您的模板中使用它
>通过$ watch服务手动添加

广告1)
这是最常见的情况,我相信你以前看过它,但你不知道这已经在后台创建了一个手表。是的,它有!使用AngularJS指令(例如ng-repeat)也可以创建隐式监视。

广告2)
这是你如何创建自己的手表。 $ watch服务帮助您在附加到$ scope的某些值已更改时运行一些代码。它很少使用,但有时是有帮助的。例如,如果你想在每次’myVar’改变时运行一些代码,你可以这样做:

function MyController($scope) {

    $scope.myVar = 1;

    $scope.$watch('myVar',function() {
        alert('hey,myVar has changed!');
    });

    $scope.buttonClicked = function() {
        $scope.myVar = 2; // This will trigger $watch expression to kick in
    };
}

$ apply允许将更改与摘要周期集成

你可以认为$ apply函数是一个集成机制。你看,每次你改变一些观察变量直接附加到$ scope对象,AngularJS将知道发生了改变。这是因为AngularJS已经知道监视这些更改。因此,如果它发生在由框架管理的代码中,摘要周期将继续。

然而,有时你想改变AngularJS世界之外的一些值,并看到更改正常传播。
考虑这个 – 你有一个$ scope.myVar值,将在jQuery的$ .ajax()处理程序中修改。这将在未来的某个时间发生。 AngularJS不能等待这发生,因为它没有被指示等待jQuery。

为了解决这个问题,引入了$ apply。它允许您显式地启动消化循环。然而,你应该只使用它来迁移一些数据到AngularJS(与其他框架集成),但不要使用这种方法结合常规的AngularJS代码,因为AngularJS会抛出一个错误

所有这些都与DOM相关?

嗯,你应该真的再次按照教程,现在你知道这一切。摘要周期将确保UI和JavaScript代码保持同步,通过评估附加到所有$ scope的每个观察者,只要没有任何变化。如果摘要循环中没有更多的变化,那么它被认为是完成的。

您可以在Controller中显式地将对象附加到$ scope对象,也可以直接在视图中以{{expression}}形式声明它们。

我希望有助于澄清一些关于这一切的基本知识。

进一步阅读:

> Make Your Own AngularJS,Part 1: Scopes And Digest(awesome article!)

原文链接:https://www.f2er.com/angularjs/148008.html

猜你在找的Angularjs相关文章