angularjs中 $watch 和$on 2种监听的区别?

1.$watch简单使用

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

$watch(watchExpression, listener, objectEquality);

每个参数的说明如下:

  1. watchExpression:监听的对象,它可以是一个angular表达式如‘name‘,或函数如function(){return $scope.name}。
  2. listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数:newValue(新值), oldValue(旧值), scope(作用域的引用)
  3. objectEquality:是否深度监听,如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它

$watch可以监听多个模型的变化

<body ng-app="app" ng-controller="first">
        <button ng-click="name=‘a‘">1</button>
        <button ng-click="name=‘b‘">2</button>
        <button ng-click="name=‘c‘">3</button>
        <button ng-click="type=2">4</button>
        <button ng-click="type=3">5</button>
        <p>{{name}}</p>
    </body>
    <script type="text/javascript">
        var app = angular.module("app", []);
        app.controller("first", function($scope) {
            $scope.name = ‘q‘;
            $scope.type = 1;

            function te() {
                console.log($scope.name+" "+ $scope.type);
            }
            $scope.$watch(‘name+type‘, function(newValue, oldValue) {                 //2个参数为 一个为新值,一个为旧值
                te();
            });
        })
    </script>

 

2.$on的用法

$on是一个scope函数,用于监听事件的变化,当你的事件发生时它会通知你。

module.controller(‘freefedCtrl‘,[‘$scope‘,function($scope){
         //监听directiveClick事件
         $scope.$on(‘directiveClick‘,function(event,param){
               console.log( param );    // 打印结果 {title : ‘我是来自指令子级作用域‘}
         });

         $scope.change = function(title){
              var result = ‘请注意接收父级广播‘;
              //向子级作用域广播parentBroadcast事件
              $scope.$broadcast(‘parentBroadcast‘,{msg : result});
         };
  }]);

  

原文地址:https://www.cnblogs.com/8080zh/p/9288107.html

时间: 2024-10-13 19:02:18

angularjs中 $watch 和$on 2种监听的区别?的相关文章

android基础之点击监听器的2种监听实现

点击监听器接口:onClickListener 抽象函数 onClick(View v) 有2个方法实现监听: 1:当前类继承点击监听器接口 package com.example.button; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.View; import android.view.View.OnClickListener; im

Android中Button的五种监听事件

简单聊一下Android中Button的五种监听事件: 1.在布局文件中为button添加onClick属性,Activity实现其方法2.匿名内部类作为事件监听器类3.内部类作为监听器4.Activity本身作为事件监听器,实现onClickListener5.外部类作为监听器 ButtonListenerActivity.class public class ButtonListenerActivity extends AppCompatActivity implements View.On

OnClickListener两种监听方法

1 //1种:接口OnClickListener ,在onclick响应 2 public class MainActivity extends Activity implements OnClickListener { //这个类前提要接口OnClickListener 3 4 private Button receive; //按钮的初始化 5 private Button falsewifiButton; 6 7 public void init(){ 8 receive=(Button)

Button的四种监听方式

Button按钮设置点击的四种监听方式 注:加粗放大的都是改变的代码 1.使用匿名内部类的形式进行设置 使用匿名内部类的形式,直接将需要设置的onClickListener接口对象初始化,内部的onClick方法会在按钮被点击的时候执行 第一个活动的java代码: 1 package com.sanlian.buttontest; 2 3 import android.content.Intent; 4 import android.support.v7.app.AppCompatActivit

java中的四种监听类用法

在此列举四种方法: 自身类实现ActionListener接口,作为事件监听器 通过匿名类处理 通过内部类处理 通过外部类处理 下面依次介绍: 第一种:自身类实现ActionListener接口,作为事件监听器. 这种方法是最基本的,也是初学者经常使用的,我当初即是如此. import java.awt.Color; import java.awt.Container; import java.awt.FlowLayout; import java.awt.event.ActionEvent;

RecyclerView的2种监听方式

NO.1:在自定义适配器的ViewHolder里面写监听事件 //RecyclerView适配器 public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> { private Context mContext; private LayoutInflater mLayoutInflater; private String[] mCityName; public RecyclerVi

设计模式之监听模式(观察者模式与监听模式区别)

一,类的四大基本关系:  a.关联关系:如A类调用B类. b.继承关系:如A类是B类的父类. c.聚合关系:如装橘子的箱子,箱子是否存在与里面装没装橘子没有任何关系,也就是说橘子不会影响箱子的存在. d.组合关系:如一个小组,小组是否存在与小组中是否有组员是息息相关的,如果没有组员,小组就不存在了. 监听器模式:事件源经过事件的封装传给监听器,当事件源触发事件后,监听器接收到事件对象可以回调事件的方法 观察者模式:观察者(Observer)相当于事件监听者,被观察者(Observable)相当于

javascript:判断支持哪种监听

if (typeof window.addEventListener != "undefined") { window.addEventListener("load",rollover); } else { window.attachEvent("onload",rollover) } function rollover(){ alert("ok"); }

两种js监听滚轮事件的方式

前段时间在写前端的时候,需要监听浏览器的滚轮事件 网上查了一下,找到两种监听滚轮事件的方法: 一.原生js通过window.onscroll监听 //监听并注册匿名函数window.onscroll = function() { //为了保证兼容性,这里取两个值,哪个有值取哪一个 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //scrollTop就是触发滚轮事件时滚轮的高度 } 二.