数据绑定有两个方向：

  • 数据 → 界面：我们使用scope对象的$watch()方法监听数据的变化，来更新界面。
  • <html>
    
<head>
    
    <title>监听数据</title>
    
    <meta charset='utf-8'>
    
    <script type="text/javascript" src='http://www.runoob.com/try/angularjs/1.2.5/angular.min.js'>
    
    </script>
    
    <script type="text/javascript">

        angular.module("binddate",[])
    
        .directive("datebind",function(){
    
            return{
    
                restrict:"E",
    
                template:"<div></div>",
    
                replace:true,
    
                link:function(scope,element,attrs){

                    //操作DOM结构
    
                    element.append("<div>name:<span></span></div>")
    
                    .append("<div>age:<span></span></div>")
    
                    .append("<div>sex:<span></span></div>")
    
                    scope.$watch(attrs.date,function(nv,ov){      //传入新值和旧值
    
                        var filds=element.find("span")
    
                        filds[0].innerText=nv.name;
    
                        filds[1].innerText=nv.age;
    
                        filds[2].innerText=nv.sex;
    
                    },true)      //监听的对象为对象时，要设为true

                    setInterval(function(){
    
                        scope.$apply("sb.age=sb.age+1")
    
                    },1000)
    
                }
    
            }
    
        })

    </script>
    
</head>
    
<body ng-app="binddate" ng-init="sb = {name:'JACK',age:21,sex:'male'}">

    <!-- 创建一个指令，并且用属性将数据传递给指令 -->
    
    <datebind date="sb"></datebind>
    
</body>
    
</html>
  • 界面 → 数据：我们在界面的DOM对象上监听变化事件，来更新数据，并通过$apply()方法传播变化。
  • <html>
    
<head>
    
    <title>修改数据</title>
    
    <meta charset='utf-8'>
    
    <script type="text/javascript" src='http://www.runoob.com/try/angularjs/1.2.5/angular.min.js'>
    
    </script>
    
    <script type="text/javascript">

        angular.module("datemodify",[])
    
        .directive("eDate",function(){
    
            return {
    
                restrict:"E",
    
                template:"<ul>",
    
                replace:true,
    
                link:function(scope,element,attrs){
    
                    console.log(1)
    
                    //获取属性值
    
                    var model=attrs.date

                    element.append("<li>name:<input type='text' field='name'></li>")
    
                    .append("<li>sex:<input type='text' field='age'></li>")
    
                    .append("<li>age:<input type='text' field='sex'></li>")

                    //监听DOM事件，变化时修改值
    
                    element.find("input").on("keyup",function(ev){
    
                        var field=ev.target.getAttribute("field");
    
                        scope[model][field] = ev.target.value;
    
                        scope.$apply("")
    
                    })
    
                }
    
            }
    
        })
    
        .directive("logger",function(){
    
            return{
    
                restrict:"A",
    
                link:function(scope,element,attrs){
    
                    var model = attrs.date;
    
                    scope.$watch(model,function(nv){
    
                        var cnt=JSON.stringify(nv,null," ")
    
                        element.html("<pre>"+cnt+"</pre>")
    
                    },true)
    
                }
    
            }
    
        })

    </script>

    <style type="text/css">
    
        ul li{border: 1px solid #ccc;}
    
    </style>
    
<body ng-app="datemodify" ng-init="sb = {name:'JACK',age:21,sex:'male'}">
    
    <e-date date="sb"></e-date>

    <div logger date="sb"></div>
    
</body>
    
</html>

层级作用域：

ng-app创建一个$rootScope对象。

在默认情况下，一个DOM子元素不会创建新的作用域，也就是说，这个子元素所对应的 scope对象，其实就是它的最近一级的祖先对象对应的scope对象。也是$rootScope对象。

有些指令会导致创建新的作用域，比如ng-controller。如果在一个DOM对象上创建了新的作用域，那么这个scope对象的原型是其最近一级的组件对象的scope对象。

  • $watch()

每个scope对象都维护了一个私有的监听队列，每次当我们在scope上执行一次$watch方法，就相当于 向这个监听队列里塞入一个监听函数。

  • $apply()

为了捕捉对数据的修改，AngularJS要求开发者使用scope对象的$apply方法对数据进行修改， $apply方法内部会自动地调用监听队列里的监听函数，比如：

angularjs的双向数据绑定的更多相关文章

  1. angularJs：双向数据绑定

    示例1 <!DOCTYPE html> <html ng-app> <head> <meta charset="UTF-8" /> ...

  2. AngularJS之双向数据绑定,class绑定

    之前一直都是用vue来完成一些日常开发,初入AngularJS,记录一些日常开发遇到的问题. 1.双向数据绑定 AngularJS与vue的区别在于,vue采用的是虚拟DOM,模板文件上绑定的一大堆指 ...

  3. angularJS 的双向数据绑定

    input 里面的vale="变量名";加上ng-model="变量名";控制器的变量名会根据视图层的数据改变而改变,而渲染内容也会根据控制器里面的变量改变而改 ...

  4. Angularjs1.X进阶笔记(1)—两种不同的双向数据绑定

    一. html与Controller中的双向数据绑定 html-Controller的双向数据绑定,在开发中非常常见,也是Angularjs1.x的宣传点之一,使用中并没有太多问题. 1.1数据从ht ...

  5. angularJs的一次性数据绑定：双冒号::

    angularJs 中双冒号 ::来实现一次性数据绑定. 原文: https://blog.csdn.net/qianxing111/article/details/79971544 -------- ...

  6. 《AngularJS权威教程》中关于指令双向数据绑定的理解

    在<AngularJS权威教程>中,自定义指令和DOM双向数据绑定有一个在线demo,网址:http://jsbin.com/IteNita/1/edit?html,js,output,具 ...

  7. AngularJS入门心得2——何为双向数据绑定

    前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉 ...

  8. Vue、AngularJS 双向数据绑定解剖

    数据与视图的绑定与同步,最终体现在对数据的读写处理过程中,也就是 Object.defineProperty() 定义的数据 set.get 函数中.Vue 中对于的函数为 defineReactiv ...

  9. AngularJS双向数据绑定

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. IOS中多版本，多设备类型支持注意事项

    IOS系统从07年出来,到现在也有6年了,每年发布一次到两次新的设备,从iPhone1,iPhone2 ... iPhone4s再到最新的iPhone5.硬件在升级的过程中CPU的架构也可能发生变化, ...

  2. [转]非OpenVZ下利用谷歌TCP-BBR协议单边加速你的VPS

    前段时间谷歌推出了新的 TCP-BBR 开源算法,可以起到单边加速 TCP 连接的效果,也就是不用客户端的配合,用来替代收费的锐速再合适不过,毕竟开源免费.TCP-BBR 的目的是要尽量跑满带宽,并且 ...

  3. zk框架中利用map类型传值来创建window，并且传值

    @Command @NotifyChange("accList") public void clear(@BindingParam("id") String a ...

  4. Android应用安全之外部动态加载DEX文件风险

    1. 外部动态加载DEX文件风险描述 Android 系统提供了一种类加载器DexClassLoader,其可以在运行时动态加载并解释执行包含在JAR或APK文件内的DEX文件.外部动态加载DEX文件 ...

  5. Linux高级编程--04.GDB调试程序（查看数据）

    查看栈信息 当程序被停住了,你需要做的第一件事就是查看程序是在哪里停住的.当你的程序调用了一个函数,函数的地址,函数参数,函数内的局部变量都会被压入"栈"(Stack)中.你可以用 ...

  6. 修复AWS上EC2损坏的sshd_config文件

    常识: AWS是没有root用户的,登陆也都是通过SSH KEY完成授权认证. 背景: 正在AWS上搭一个CI (GO),与gitlab,为了将其进行集成,需将gitlab的deploy key设置成 ...

  7. n 后问题

    n后问题,解决思路:假设每个皇后占一行(且第i个皇后放在第i - 1 行),依次去尝试下一个皇后该放在该行的哪一列 #include<iostream> #include<cmath ...

  8. #敏捷个人资料# 免费下载 《敏捷个人－认识自我，管理自我 v0.8.pdf》

    快乐.高效.平衡,做一个爱学习.有目标.懂生活的影响者. 从今天开始至7月31日,点击http://t.cn/Rv3koHU 免费收到 1000多页的 <敏捷个人-认识自我,管理自我 v0.8. ...

  9. 【推荐】iOS汉字转拼音第三方库

    PinYin4Objc是一个在git汉字转拼音的开源库,支持简体和繁体中文.效率POAPinyin等其他库要高,转换库也完整下面简单介绍 实现原理 使用unicode_to_hanyu_pinyin. ...

  10. MySQL中自己不太常用的命令

    一 更改表的信息 alter table students add primary key (stunum); 为已经创建好的表添加主键. alter语句不仅可以添加主键,还可以对已经创建好的表修改一 ...