Directive指令的scope配置项使用说明

常见三种：

1.false-----完全继承父级,子父同步

2.true------继承父级，同时创建自己的作用域，父级改变，自己改变，但自己改变父级不变

3.{}--------创建自己的作用域，和父级完全隔离，与父级毫无关系

♣隔离条件下着重介绍的三个子父之间传值关系

1.@父传子，子不能传父--------》字符串，有{{}}

2.=父子相传，作用域相通------》变量，无{{}}

3.&子传父，子变化时，父有函数对应执行，父级监听子级-------》directive里绑定的是函数，函数的返回值绑定父级中的值或者函数

 以上@,=这两种方式要注意第一种是字符串，而第二种是变量，从双花括号{{}}的使用可以区别开来。&用于绑定父级的值或者函数进而通过父级的含函数监听子级的变化

事例

　　 <div ng-app="myapp"  ng-controller="mycontrol">
        <div>{{name}}<input type="text" ng-model="name"/></div>
        <myelement myname="{{name}}"></myelement></br>
        <myelem twoname="name"></myelem></br>
        <myele threename="name"></myele></br>
        <myel fourname="box()"></myel>
    </div>
    <script type="text/javascript"> 
        var app = angular.module('myapp', []);
        app.controller('mycontrol', function($scope) {
           $scope.name="hello world!";
           $scope.box=function(){
                   alert("子级调用父级函数")
           }
        }).directive("myelement",function(){
                return{
                    restrict:"EA",
                    template:"<input type='text' ng-model='myname'>",
                    scope:{
                        myname:"@"
                    }
                }
        }).directive("myelem",function(){
            return{
                restrict:"EA",
                template:"<input type='text' ng-model='twoname'/>",
                scope:{
                    twoname:"="
                }
                
            }
        }).directive("myele",function(){
            return{
                restrict:"EA",
                template:"<div>{{threename()}}</div>",
　　　　　　　　　//template:"<input type='text' ng-model='threename()'/>",这样不能成功，如果是这样就类似于@　
                scope:{
                    threename:"&"
                }
            }
        }).directive("myel",function(){
            //子级调用父级函数
            return{
                restrict:"EA",
                template:"<div ng-click='fourname()'>点击</div>",
                scope:{
                    fourname:"&"
                }
                
            }
        })
    </script>

 

 

 

转载于:https://www.cnblogs.com/yogic/p/8312836.html