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

     

  • 相关阅读:
    JDBC 访问数据库的流程
    JSP中两种include的区别
    javascript中循环语句 while、dowhile、forin、for用法区别
    php正则取得页面所有的图片地址
    php基础入门篇学习笔记
    php正则表达匹配中文问题分析
    .htaccess 301重定向详细教程
    忘记mysql的root密码重置方法
    php for循环语句的几种用法分析
    javascript邮箱验证代码分析
  • 原文地址:https://www.cnblogs.com/yogic/p/8312836.html
Copyright © 2020-2023  润新知