Heim> php教程> PHP开发> Hauptteil

AngularJS中watch监听用法分析

高洛峰
Freigeben: 2016-12-07 16:05:25
Original
1137 Leute haben es durchsucht

本文实例讲述了AngularJS中watch监听用法。分享给大家供大家参考,具体如下:

ANGULAR 监听使用:

当angular数据模型发生变化时,我们需要如果需要根据他的变化触发其他的事件。

$watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你。

$watch(watchExpression, listener, objectEquality);
Nach dem Login kopieren

wKiom1hGI9PjhMAvAAAJwSkxZBM314.png-wh_600x-s_2253347697.png

    Insert title here 
Name updated: {{updated}} times.
Nach dem Login kopieren


此代码监控$scope的name值的变化,如果发生变化则触发监听。

监控对象:

    Insert title here 
Name updated: {{updated}} times.
Nach dem Login kopieren

这里我们点击按钮会发现监控并不会触发,原因是我们监控了user对象,这个user对象没哟发生变化,只不过属性值发生了变化。

如果我们希望监控user对象属性发生变化,有两个做法。

1.使用深度监控。

方法如下:

    Insert title here 
Name updated: {{updated}} times.
Nach dem Login kopieren

设置为深度监控,只要对象发生变化,那么监听就会触发。

2.直接写对象的属性值路径。

var watch=$scope.$watch('user.name', function(newValue, oldValue) { //具体代码就不全部写了。
Nach dem Login kopieren

消除监听

系统中太多的监听会影响系统的性能,我们可以在满足某些条件后,去掉监听。

去掉监听方法如下:

var watch=$scope.$watch('user', function(newValue, oldValue) { if (newValue === oldValue) { return; } $scope.updated++; $scope.$broadcast('userUpdate', newValue.name); },true); //去掉监听。 watch();
Nach dem Login kopieren

在系统中使用事件广播。

比如在监听时,我们对外广播一个事件,

在控制其中写监听的处理方法:

实例如下:

$scope.$broadcast('userUpdate', newValue.name);
Nach dem Login kopieren

监听代码:

$scope.$on('userUpdate',function(d,data){ console.info(data); })
Nach dem Login kopieren

这种做法最好使用在指令中,指令中广播事件,在控制器中实现监听。好处在于实现代码的重用。

希望本文所述对大家AngularJS程序设计有所帮助。


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Empfehlungen
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage
    Über uns Haftungsausschluss Sitemap
    Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!