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方法内部会自动地调用监听队列里的监听函数，比如：