• angular指令的详细讲解,不断补充


    独立作用域:就是在指令中设置了scope: ****

    ·false 共享父作用域 
    ·true 继承父作用域,并且新建独立作用域 
    ·object 不继承父作用域,创建新的独立作用域

    一般来说我们会使用第三种方式:为了避免同一父级作用域下,多个指令的相互污染。

    在指令中设置了独立作用域之后,就会用三种方式与外界进行交互:@,=,&

    1)@

    这种使用方式一般使用与指令内部的作用,例如外部的控制器中定义了一个变量,这个变量只能由控制器自己进行修改,指令只能被动接受,此时就是用这种方式。

    但是这不是一种双向绑定,因此需要花括号。

    <choice-item   sty-obj= "{{styObj}}"></choice-item>

    2)= 
    这种方式一般用于双向绑定,例如外部控制器定义了一个变量,这个变量不仅控制器能进行修改,并且指令也能进行修改,两边数据交互统一,这个时候就使用这种绑定方式。

    这是一种双向绑定的方式意味着绑定的时候不需要花括号。

    <choice-item  html-config='htmlConfig' em-config='emConfig'></choice-item>

    3)& 

    这种方式一般是绑定函数,例如在指令内部想传递参数(必须以对象的形式)到外部控制器,并且能触发控制器的某方法。

    指令使用场景:
    <choice-item part-des = "['个人信息','职务信息','联系信息']" filter-click = 'filterClick({headConfig:headConfig})' ></choice-item>
    指令中:
    link: function($scope,el,attr) {
    // 点击确认
    $scope.filterClick({headConfig: $scope.emConfig});
    } 
    外部控制器:
    $scope.filterClick = function(obj){
      $scope.headConfig = getSelectedConfig(obj.headConfig);
      $scope.filter_show = false;
    };

    replace: 是一个可选参数,如果设置了这个参数,值必须为true,因为默认值为false。默认值意味着模板会被当作子元素插入到调用此指令的元素内部:

    <my-directive></my-directive>
    .directive("myDirective",function(){ return { template:"<h3>世上无难事,只怕有心人</h3>" } }) 调用指令之后的结果如下(这是默认replace为false时的情况): <my-directive> <h3>世上无难事,只怕有心人</h3> </my-directive>
    如果replace被设置为了true: .directive("myDirective",function(){ return { replace:true, template:"<h3>世上无难事,只怕有心人</h3>" } }) 那么指令调用后的结果将是: <h3>世上无难事,只怕有心人</h3>

    官方网址:

     http://www.angularjs.net.cn/tutorial/5.html

  • 相关阅读:
    JS解析JSON 注意事项总结
    Jquery 绑定标签事件
    System.Globalization.CultureInfo.InvariantCulture 解决不同地域字符串格式不同问题
    c# HttpWebRequest 模拟HTTP post 传递JSON参数
    Django REST framework (DRF) 不能用property或method排序
    django filters TypeError __init__() got an unexpected keyword argument 'lookup_type'
    DRF(Django Rest Framework)备忘
    测试服务器
    还款计算-复式记账
    Django 相关内容blog备忘
  • 原文地址:https://www.cnblogs.com/evaling/p/9265202.html
Copyright © 2020-2023  润新知