为深入了解应用()和$()在Angular.js消化
介绍美元()和美元摘要()AngularJS提供了一种称为双向数据绑定非常酷的功能,大大简化了我们的代码的编写方式,数据绑定,意味着如果在查看任何数据的变化,这种变化也将自动反馈到范围的数据,这意味着范围的模型会自动更新。同样,范围模型变化时,视图中的数据也将被更新到最新的值。那么AngularJS是怎样做的呢当你写下的表达,AngularJS将设立一个守望你幕后的范围模型,这是用来更新视图时的数据变化。
这里的人是看你将在AngularJS同:
美元美元范围。看('amodel功能(价值、属性的旧值){
/ /更新DOM与价值
});
第二个参数传递到手表美元()是一个回调函数,被调用时的值变化时的模型,模型的变化,这是不难理解的回调函数将被用于更新的看法,但有一个很重要的问题。AngularJS是怎么知道什么时候调用这个回调函数换句话说,AngularJS是如何知道一个改变了调用相应的回调函数它周期性地运行一个函数来检查范围模型中的数据是否已经改变了吗好吧,这就是使用美元结算周期。
在美元的消化循环,守望者是触发。当一个守望者是触发,AngularJS检测范围模型,以及它如何改变并与人相关的回调函数将被调用。
然后,下一个问题是什么时候开始以多种方式消化美元循环
调用范围后美元。美元(美元)消化,消化循环开始。你改变数据范围对应于NG点击指令处理函数的假设,AngularJS会自动触发消化循环调用美元美元(美元)消化。当消化循环开始,它触发每个人。这些人将检查无论是在范围的电流模型的价值不同,从以前的模型计算得到的值。如果不同,那么相应的回调函数将被执行,调用函数的结果是,在视图所表达的内容(翻译:如)将被更新。除了NG点击指令,还有一些内置的指导和服务,使你改变模型s(如NG模型、超时时间等),并自动触发一个摘要周期。
到目前为止还不错!但有一个小问题。在上面的例子中,AngularJS不叫美元直接,但需要消化()()适用范围美元。美元,要求rootscope美元。美元消化()。因此,一轮美元起价rootscope消化循环,然后所有的孩子都能范围被访问。
现在,假设你副NG点击指令按钮,通过在函数名的ng-click.when按钮被点击时,AngularJS将包的功能进包装功能,然后把它传给美元美元的适用范围。()。因此,你的函数将正常执行,修改模型(如有必要),然后是一轮消化周期也将引发美元以确保视图也将更新。
适用范围美元。美元()自动调用rootscope美元。美元消化()。有$适用两种形式()方法,首先以一个函数作为参数,执行功能和触发一轮美元消化周期。会议二种不接受任何参数,只触发轮$消化周期。我们将很快看到为什么第一种形式更好。
何时将手动调用$()方法
如果AngularJS总是我们的代码封装到函数和进口申请(),美元以启动$消化周期,那么我们什么时候需要手动调用应用(美元)事实上,有一个非常明确的AngularJS的要求。它只负责在AngularJS的背景下,正在发生变化的自动反应,美元的变化将模型()方法,这是由AngularJS内置指令完成的,所以任何模型的变化将反映在视图中。然而,如果你修改模型的任何AngularJS语境之外,你需要通知AngularJS通过手动调用应用(美元)。这就像告诉AngularJS,你已经修改了一些模型,你要AngularJS帮你触发做出正确反应的守望者。
例如,如果你使用setTimeout()Javascript更新范围模型,然后AngularJS没有办法知道你已经改变了。在这种情况下,调用应用(美元)是你的责任,通过调用它来引发一轮美元消化循环。同样的,如果你要建立一个DOM事件监听器和修改在听者的一些模型的一个指令,你还需要手动申请(美元)以确保将正确反映观。
让我们看一个例子。加入一个页面,页面加载后,你想在两秒钟后显示一条消息:
延迟消息:{消息}
如果没有$应用程序(***)会发生什么
Angular.module('myapp,{ })。控制器('messagecontroller功能(范围){
scope.getmessage美元=函数(){
setTimeout(){()函数(
scope.message美元= 'fetched后3秒;
console.log(消息:+ $范围。消息);
},2000);
}
scope.getmessage美元();
});
通过运行这个例子,你会看到两秒后,主机会显示更新后的模型,但是,看来没有更新。原因也许你已经知道的是,我们忘了打电话给美元()方法的应用。因此,我们需要修改GetMessage(),如下图所示:
应用$会发生什么
Angular.module('myapp,{ })。控制器('messagecontroller功能(范围){
scope.getmessage美元=函数(){
setTimeout(){()函数(
$范围($)函数(){()
在应用范围内包装此
scope.message美元= 'fetched后3秒;
console.log(消息:+ $范围。消息);
});
},2000);
}
scope.getmessage美元();
});
如果您运行上面的示例,您将看到该视图将在两秒钟内更新。唯一的更改是我们的代码现在被发送到$范围。它会引发消化rootscope美元。美元()自动,让观众可以触发更新视图。
顺便说一下,你应该不是setTimeout使用$超时服务()因为前者会帮你叫$适用(),你不需要手动。
另外,请注意,在上面的代码中,您也可以在修改模型后手动调用$(),而不必修改模型,如下所示:
scope.getmessage美元=函数(){
setTimeout(){()函数(
scope.message美元= 'fetched后两秒;
console.log(消息:+ $范围。消息);
应用程序();这将触发一个摘要。
},2000);
};
上面的代码使用的第二种形式适用于()美元,即没有参数。它是要记住,你应该总是使用$()方法应用的重要,接受了一个函数作为参数。这是因为当你传递一个函数为应用(),函数将被包裹在catch块试试…,所以一旦发生异常,该异常是由美元的异常处理服务处理。
美元循环会运行多少次
当一个$摘要循环运行时,观察者将被执行以检查范围内的模型是否发生了变化。如果有更改,相应的侦听器函数将被执行。这涉及一个重要问题。如果侦听器函数本身修改了范围模型如何应对这一情况,AngularJS吗
答案是,为消化环不跑一次。当前循环结束后,它将执行一个循环来检查是否有在模式的改变。这是肮脏的检查,这是用来处理模型发生变化时可能出现的侦听器函数的执行。因此消化循环,美元将继续运行,直到模式不改变,或消化循环的美元数量已经达到了10次。所以,不要修改模型在侦听功能尽可能。
即使不改变侦听器函数中的任何模型,美元循环至少会运行两次,正如前面所讨论的,它将再次运行,以确保模型不会改变。
总结
我想这篇文章解释适用digest.the美元美元,最重要的是记住无论AngularJS可以检测模型的更改。如果它不能被检测到,你需要手动申请(美元)。这是这篇文章的全部内容。你们都学过吗希望本文的内容能对大家的学习或工作有所帮助。如果有问题,你可以留言。