angularJS中自定义指令

Posted 2020-08-19 花信

学习了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的生命周期。