angular自定义指令详解

时间 2019-11-09

原文原文链接

在运用angularjs的时候，运用自定义指令能够写一些组件，很是方便。这里给你们分享一些关于angular自定义指令的知识。javascript

1. 定义

对于指令，能够把它简单的理解成在特定DOM元素上运行的函数，指令能够扩展这个元素的功能。java

2.定义指令的方法：

angular.module('myApp', []) 
.directive('myDirective', function ($timeout, UserDefinedService) { 
    // 指令定义放在这里 
});

第一个参数，指令的名字myDirective 用来在视图中引用特定的指令。
第二个参数是一个函数，这个函数返回一个对象，$compile服务利用这个方法返回的对象，在DOM调用指令时来构造指令的行为。angularjs

3.指令设置的选项

angular.module('myApp', []) 
.directive('myDirective', function() { 
    return { 
        restrict: String, 
        priority: Number, 
        terminal: Boolean, 
        template: String or Template Function: 
            function(tElement, tAttrs) (...}, 
        templateUrl: String, 
        replace: Boolean or String, 
        scope: Boolean or Object, 
        transclude: Boolean, 
        controller: String or  
        function(scope, element, attrs, transclude, otherInjectables) { ... }, 
        controllerAs: String, 
        require: String, 
        link: function(scope, iElement, iAttrs) { ... }, 
        compile: // 返回一个对象或链接函数，以下所示： 
            function(tElement, tAttrs, transclude) { 
                return { 
                    pre: function(scope, iElement, iAttrs, controller) { ... }, 
                    post: function(scope, iElement, iAttrs, controller) { ... } 
                } 
                // 或者 
                return function postLink(...) { ... } 
           } 
    }; });

restrict 指令在DOM中能够何种形式被引用或声明express
```
可选值以下： （ 可组合使用 ）
```
E（元素） <my-directive></my-directive>
A（属性，默认值） <div my-directive="expression"></div>
C（类名） <div class="my-directive:expression;"></div>
M（注释） <--directive:my-directive expression-->数组
priority 优先级用来表示指令使用的优先顺序
若是一个元素上具备两个优先级相同的指令，声明在前面的那个会被优先调用。若是其中一个的优先级更高，则无论声明的顺序如何都会被优先调用：具备更高优先级的指令老是优先运行。app

terminal 用来告诉AngularJS中止运行当前元素上比本指令优先级低的指令。但同当前指令优先级相同的指令仍是会被执行。函数

<div ng-app="myApp" ng-controller="myCtr">
<!--此处在div上使用了两个自定义指令，做为属性存在，但directiveOne优先级高，并且设置了terminal属性，因此directiveSec指令并不会执行-->
   <div directive-Sec directive-One>
    这是自定义指令
   </div>    
</div>
var myCtr=["$scope",function($scope){}]
var app=angular.module("myApp",[]);
app.controller("myCtr",myCtr);
app.directive("directiveOne",function(){
return {
    restrict: "ECMA", 
    priority: 2, 
    terminal: true, 
    template:function(tElement, tAttrs){
        tElement[0].style.fontSize="18px"; //设置字体
    }
}
});
app.directive("directiveSec",function(){
return {
    restrict: "ECMA", 
    priority: 1, 
    template:function(tElement, tAttrs){
        tElement[0].style.color="red"; //设置颜色
    }
}
});

template
用来表示模板，能够是一段字符串，如“<h1>这是自定义指令</h2>”,也能够是一个函数，能够参考上面的例子post

template:function(tElement, tAttrs){
//tElement表示当前元素，是一个数组，tAttrs表示该元素的属性，是一个对象
   tElement[0].style.color="red"; //设置颜色
}

templateUrl 用来表示模板，与上面的template功能类似，但表示路径，能够是外部HTML文件路径的字符串也能够是一个能够接受两个参数的函数，参数为tElement和tAttrs，并返回一个外部HTML文件路径的字符串。字体

replace 默认为false，模板会被看成子元素插入到调用此指令的元素内部，为true，则直接替换此元素ui

<div some-directive></div> 
.directive('someDirective', function() { 
return { 
    template: '<div>some stuff here<div>' 
}; }); 
<!-- 调用指令以后的结果以下（这是默认replace为false时的状况）：  -->
<div some-directive> 
<div>some stuff here<div> 
</div> 


<!-- 若是replace被设置为了true：  -->
.directive('someDirective', function() { 
return { 
    replace: true // 修饰过 
    template: '<div>some stuff here<div>' 
}; }); 
<!-- 指令调用后的结果将是：  -->
<div>some stuff here<div>

scope

（1）当scope设置为true时，会从父做用域继承并建立一个新的做用域对象。
（2） 默认为false，并不会建立新的做用域对象，直接使用父scope。
（3）设置为{}，表示隔离做用域，指令的 模板就没法访问外部做用域了

var myCtr=["$scope",function($scope){
    $scope.name="father controller！！"
}]
var app=angular.module("myApp",[]);
app.controller("myCtr",myCtr);
app.directive("directiveOne",function(){
    return {
        restrict:"ECMA",
        template: '<div>这是自定义指令{{name}}<div>',
        scope:{},
        controller:function($scope){
            console.log($scope.name);//打印出来为undefined，由于没法访问尾部做用域了
        }
    }
});

固然，AngularJS提供了几种方法可以将指令内部的隔离做用域，同指令外部的做用域进行数据绑定。
（a）@ (or @attr) 单向绑定，外部scope可以影响内部scope，但反过来不成立

<body>
    <div ng-app="myApp" ng-controller="myCtr">
        <input type="" name="" ng-model="value">
        <!-- 注意此处的svalue要写成s-Value，否则没效果-->
          <directive-One s-Value="{{value}}">
              
          </directive-One>
    </div>
<!--  -->
</body>
<script type="text/javascript">
    var myCtr=["$scope",function($scope){
        $scope.value="";
    }]
    var app=angular.module("myApp",[]);
    app.controller("myCtr",myCtr);
    app.directive("directiveOne",function(){
        return {
            restrict:"ECMA",
            template: '<div>这是自定义指令<input type="" name="" ng-model="sValue">{{sValue}}<div>',
            scope:{
                sValue:"@"
            },
            controller:function($scope){
                $scope.sValue="";
                console.log($scope.sValue);
            }
        }
    });

</script>

（b）= (or =attr)  双向绑定，外部scope和内部scope的model可以相互改变

<body>
        <div ng-app="myApp" ng-controller="myCtr">
            <input type="" name="" ng-model="value">
            <!-- = 前面的value表示自定义指令本身的属性名，后面的value表示父做用域的value -->
              <directive-One value="value">
                  
              </directive-One>
        </div>
    
    </body>
    <script type="text/javascript">
        var myCtr=["$scope",function($scope){
            $scope.value="1";
        }]
        var app=angular.module("myApp",[]);
        app.controller("myCtr",myCtr);
        app.directive("directiveOne",function(){
            return {
                restrict:"ECMA",
                template: '<div>这是自定义指令<input type="" name="" ng-model="value">{{value}}<div>',
                scope:{
                    value:"="
                },
                controller:function($scope){
                    $scope.value="";
                    console.log($scope.value);
                }
            }
        });
    
    </script>

![图片描述][1]
    上面的输入框输入，下面会变，下面的输入框输入上面的也会变

    （c）& (or &attr)  把内部scope的函数的返回值和外部scope的任何属性绑定起来

controller
controller参数能够是一个字符串或一个函数。当设置为字符串时，会以字符串的值为名字，来查找注册在应用中的控制器的构造函数.当为函数时，能够像平时写控制器那样写，能够将任意能够被注入的AngularJS服务传递给控制器
controllerAs（字符串）
controllerAs参数用来设置控制器的别名，能够以此为名来发布控制器，而且做用域能够访问controllerAs。这样就能够在视图中引用控制器，甚至无需注入$scope。
require
require参数能够被设置为字符串或数组，字符串表明另一个指令的名字。require会将控制器注入到其值所指定的指令中，并做为当前指令的连接函数的第四个参数。

字符串或数组元素的值是会在当前指令的做用域中使用的指令名称。