zoukankan      html  css  js  c++  java
  • angularjs的双向数据绑定

    数据绑定有两个方向:

    • 数据 → 界面:我们使用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方法内部会自动地调用监听队列里的监听函数,比如:

  • 相关阅读:
    HDU 2089 不要62 (数位DP)
    数位DP总结
    怒刷DP之 HDU 1160
    将时间转为几小时前,几周前,几天前等
    link与import的区别
    什么是虚拟DOM?为啥虚拟DOM可以提升性能?
    前端面试问题2
    【转载】什么是闭包? 闭包的优缺点 闭包的应用场景
    小程序发布审核不通过
    前端面试常问 问题总结
  • 原文地址:https://www.cnblogs.com/yzg1/p/4673139.html
Copyright © 2011-2022 走看看