• 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>

     

  • 相关阅读:
    SQL分页存储过程
    ASP.NET 程序优化
    SQL2005数据导入导出
    跨服务器修改表同时按照顺序关联两个没有关系的表
    SQL function中使用rand随机函数
    Ajax的一些体会
    XCode4 App Store提交小结
    XCode4 App Store提交小结
    wzplayer for mips成功面世,支持dlna,mms,http,rtsp
    tlplayer support smb
  • 原文地址:https://www.cnblogs.com/yogic/p/8312836.html
Copyright © 2020-2023  润新知