zoukankan      html  css  js  c++  java
  • angularJS中自定义指令

    学习了angularJS一周,但是大部分时间被自定义指令占用了。博主表示自学互联网好心塞的,发现问题的视觉很狭窄,这比解决问题要更难。这篇文章首先介绍了自定义,然后介绍了在使用自定义指令遇到的问题。

     代码模板:

    var myModule = angular.module("myModule",[]);

         myModule.directive('directiveName',function(){  

     return{ restrict:string,     

                  template:string,    

                templateUrl:string, replace:boolean,     

                 transclude:boolean,     

                 scope:bollean 或 object,     

                 link:function(scope,element,attrs){  },

                 compile:function(element,attrs,transclude){  } ...  

      }

    .directive('指令名', [参数1,参数2,… function(形参1’, 形参2’,…) {}])//该参数是固定的。

               第一个参数是指令的名字。定义指令的名字,应该使用驼峰命名法,使用时用-连接。

               第二个参数使用一个数组,这是为了防止压缩代码后转义。数组的最后一个元素是一个函数。

    restrict:指定如何在模板中使用自定义指令,可取E、A、C、M中的一个或任意组合。默认值为A。

                E:表示元素的名称;A:表示元素的属性;C:表示CSS中的class;M:表示注释。

               元素和标签使用:

    div ng-controller="InController">
        <!-- inputdirct作为属性使用 -->
        <div  add-one="name" add-two="name" inputdirct class="div1"> </div> 
        </br></br>
        <!-- inputdirct作为标签使用 -->
         <inputdirct add-one="name" add-two="name"></inputdirct>
    </div>

    template:指令的内联模板;

    template:指令的内联模板的url;

    replace:若取值伪true,模板(template)替换指令所在的元素;若取为false,把模板(template)放在指令所在元素的内部。默认值为false。

    transclude:把指令元素的子元素移到指令内联模板的内部。

    scope : false:自定义指令的scope对象就是指令所在的scope对象(作用域) true:自定义指令建立了一个scope对象,并继承了外层的scope。

             object:自定义指令创建了一个scope对象,不继承外层的scope,该scope与外层scope隔离。

    自定义指令scope通信:通过传递属性名映射的方式把父scope中指定的属性传递给这个独立的scope。

         绑定方式如下:

      (1)@:单向文本绑定,传递一个字符串值。当父作用域属性改变时,隔离的scope中的属性值随着变化;当隔离的scope中的属性值改变时,父作用域的属性值不随着变化。

      (2)= :双向绑定,传递父作用域的属性,传递的数据类型可以是字符串、数组、对象等。当父作用域属性改变时,隔离的scope中的属性值会发生变化;当隔离的scope中的属性发生变化时,父作用域的属性也会发生变化。

    (3)&:执行父作用预计中的函数。

      分析:@和=区别

    <div ng-controller="InController">
         <inputdirct add-one="name" add-two="name"></inputdirct>
    </div>  
     <script src="bower_components/angular/angular.js"></script>
     <script>
        var app = angular.module("App",[]);
        //  控制器
          app.controller('InController',['$scope',function($scope){
                // $scope.inputdate = '';
                $scope.name='LiShuyi';//控制器中给name赋值‘Lishuyi’,添加到属性add-one和add-two中
    
                $scope.$watchCollection('name',function(now,old){console.log(now)});
                 
                }]);
         // 自定义指令
          app.directive("inputdirct",function(){
              return{
                      restrict : 'EA',
                      scope:{addOne:'@',
                      addTwo:'='},
                      template:'<span>使用@单向文本绑定{{addOne}}</span></br>
                      <span>使用=双向文本绑定{{addTwo}}</span>',
                      // 分别使用@和=引用add-one和add-two,通过浏览器的输出结果可以发现,@输出的di元素中add-one属性的值,而=输出的是在控制器中赋值的name。
                         }
    
         });

    compile、link:这两个选项关系到AngularJS的生命周期。 

  • 相关阅读:
    破解VNC密码
    word无法插入页码
    修改windows远程桌面端口号
    系统每次进入桌面报错“由于启动计算机时出现了页面文件配置问题”
    树梅派安装GMChess中国象棋
    Linux命令Top详解
    树梅派修改root密码及切换账户
    树梅派安装截图工具
    Linux有趣的应用,画只小猫陪伴你
    Windows 10访问XP系统共享文件报”因为文件共享不安全,所以你不能连接到文件共享。。。“
  • 原文地址:https://www.cnblogs.com/microcosm/p/6056916.html
Copyright © 2011-2022 走看看