angular自定義指令詳解

時間  2019-11-09
標籤 angular 自定義 指令 詳解 欄目 AngularJS 简体版
原文   原文鏈接

在運用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(...) { ... } 
           } 
    }; });

  1. 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-->數組

  2. priority 優先級 用來表示指令使用的優先順序
    若是一個元素上具備兩個優先級相同的指令，聲明在前面的那個會被優先調用。若是其中一 個的優先級更高，則無論聲明的順序如何都會被優先調用：具備更高優先級的指令老是優先運行。app

  3. 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"; //設置顏色
    }
}
});

  4. template
    用來表示模板，能夠是一段字符串，如「<h1>這是自定義指令</h2>」,也能夠是一個函數，能夠參考上面的例子post

    template:function(tElement, tAttrs){
//tElement表示當前元素，是一個數組，tAttrs表示該元素的屬性，是一個對象
   tElement[0].style.color="red"; //設置顏色
}

  5. templateUrl 用來表示模板，與上面的template功能類似，但表示路徑，能夠是外部HTML文件路徑的字符串也能夠是一個能夠接受兩個參數的函數，參數爲tElement和tAttrs，並返回一個外部HTML文件 路徑的字符串。字體

  6. 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>

  7. 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的任何屬性綁定起來

  8. controller
    controller參數能夠是一個字符串或一個函數。當設置爲字符串時，會以字符串的值爲名字， 來查找註冊在應用中的控制器的構造函數.當爲函數時，能夠像平時寫控制器那樣寫，能夠將任意能夠被注入的AngularJS服務傳遞給控制器

  9. controllerAs（字符串）
    controllerAs參數用來設置控制器的別名，能夠以此爲名來發布控制器，而且做用域能夠訪 問controllerAs。這樣就能夠在視圖中引用控制器，甚至無需注入$scope。

  10. require
    require參數能夠被設置爲字符串或數組，字符串表明另一個指令的名字。require會將控 制器注入到其值所指定的指令中，並做爲當前指令的連接函數的第四個參數。

字符串或數組元素的值是會在當前指令的做用域中使用的指令名稱。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程