AngularJS 學習筆記——自定義指令

時間 2019-12-06

標籤 angularjs 學習筆記自定義指令欄目 AngularJS 简体版

原文原文鏈接

自定義指令javascript

1.restrict屬性css

E 做爲元素名使用
A 做爲屬性使用
C 做爲類名使用
M 做爲註釋使用

restrict 默認值爲EA, 便可以經過元素名和屬性名來調用指令。html

推薦使用元素和屬性的方式使用指令
當須要建立帶有本身的模板的指令時，使用元素名稱的方式建立指令
當須要爲已有的HTML標籤增長功能時，使用屬性的方式建立指令java

2.replace屬性bootstrap

默認爲false,若設置爲true，則會移除用戶在html中的內容。瀏覽器

<hello> 
    <div>這裏是指令內部的內容。</div> 
</hello>

var myModule = angular.module("MyModule", []); 
myModule.directive("hello", function() { 
    return { 
        restrict:"AE", 
        template:"<div>Hello everyone!</div>", 
        replace:true 
    }  
});

編譯爲：緩存

3.$templateCache對象：從瀏覽器緩存中得到html片斷app

示例：<hello></hello>函數

var myModule = angular.module("MyModule", []); 
   
//注射器加載完全部模塊時，此方法執行一次 
myModule.run(function($templateCache){ 
    $templateCache.put("hello.html","<div>Hello everyone!!!!!!</div>"); 
}); 
   
myModule.directive("hello", function($templateCache) { 
    return { 
        restrict: 'AECM', 
        template: $templateCache.get("hello.html"), 
        replace: true 
    } 
});

編譯結果：ui

擴展閱讀：angular模板加載 ----ng-template

4.templateUrl屬性

var myModule = angular.module("MyModule", []); 
myModule.directive("hello", function() { 
    return { 
        restrict: 'AECM', 
        templateUrl: 'hello.html', 
        replace: true 
    } 
});

最後編譯的結果爲：用戶定義的html片斷內容。

5.transclude屬性

若設置爲true，則保留用戶在html中定義的內容。

示例：

<hello> 
    <div>這裏是指令內部的內容。</div> 
</hello>

var myModule = angular.module("MyModule", []); 
myModule.directive("hello", function() { 
    return { 
        restrict:"AE", 
        transclude:true, 
        template:"<div>Hello everyone!<div ng-transclude=""></div></div>" 
    }  
});

6.directive(指令)與controller(控制器)之間的交互

示例：

<!doctype html> 
<html ng-app="MyModule"> 
    <head> 
        <meta charset="utf-8"> 
    </head> 
    <body> 
        <div ng-controller="MyCtrl"> 
            <loader howToLoad="loadData()">滑動加載</loader> 
        </div> 
        <div ng-controller="MyCtrl2"> 
            <loader howToLoad="loadData2()">滑動加載</loader> 
        </div> 
    </body> 
    <script src="framework/angular-1.3.0.14/angular.js"></script> 
    <script src="Directive&Controller.js"></script> 
</html>

var myModule = angular.module("MyModule", []); 
myModule.controller('MyCtrl', ['$scope', function($scope){ 
    $scope.loadData=function(){ 
        console.log("加載數據中..."); 
    } 
}]); 
myModule.controller('MyCtrl2', ['$scope', function($scope){ 
    $scope.loadData2=function(){ 
        console.log("加載數據中...22222"); 
    } 
}]); 
myModule.directive("loader", function() { 
    return { 
        restrict:"AE", 
        link:function(scope,element,attrs){ 
            element.bind('mouseenter', function(event) { 
                //scope.loadData(); 
                // scope.$apply("loadData()"); 
                // 注意這裏的坑，howToLoad會被轉換成小寫的howtoload 
                scope.$apply(attrs.howtoload); 
            }); 
        } 
    }  
});

7.directive(指令)之間的交互

示例：

<!doctype html> 
<html ng-app="MyModule"> 
   
<head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css"> 
    <script src="framework/angular-1.3.0.14/angular.js"></script> 
    <script src="Directive&Directive.js"></script> 
</head> 
   
<body> 
    <div class="row"> 
        <div class="col-md-3"> 
            <superman strength>動感超人---力量</superman> 
        </div> 
    </div> 
    <div class="row"> 
        <div class="col-md-3"> 
            <superman strength speed>動感超人2---力量+敏捷</superman> 
        </div> 
    </div> 
    <div class="row"> 
        <div class="col-md-3"> 
            <superman strength speed light>動感超人3---力量+敏捷+發光</superman> 
        </div> 
    </div> 
</body> 
</html>

var myModule = angular.module("MyModule", []); 
myModule.directive("superman", function() { 
    return { 
        scope: {},   //獨立做用域 
        restrict: 'AE', 
        controller: function($scope) {  //暴露共用的屬性和方法 
            $scope.abilities = []; 
            this.addStrength = function() { 
                $scope.abilities.push("strength"); 
            }; 
            this.addSpeed = function() { 
                $scope.abilities.push("speed"); 
            }; 
            this.addLight = function() { 
                $scope.abilities.push("light"); 
            }; 
        }, 
        link: function(scope, element, attrs) {  //操做DOM 
            element.addClass('btn btn-primary'); 
            element.bind("mouseenter", function() { 
                console.log(scope.abilities); 
            }); 
        } 
    } 
}); 
myModule.directive("strength", function() { 
    return { 
        require: '^superman', 
        link: function(scope, element, attrs, supermanCtrl) { 
            supermanCtrl.addStrength(); 
        } 
    } 
}); 
myModule.directive("speed", function() { 
    return { 
        require: '^superman', 
        link: function(scope, element, attrs, supermanCtrl) { 
            supermanCtrl.addSpeed(); 
        } 
    } 
}); 
myModule.directive("light", function() { 
    return { 
        require: '^superman', 
        link: function(scope, element, attrs, supermanCtrl) { 
            supermanCtrl.addLight(); 
        } 
    } 
});

解釋

angular.module('docsTransclusionExample', [])
.controller('Controller', ['$scope', function($scope) {
  $scope.name = 'Tobias';
}])
 // 若是指令的名字爲xxx-yyy 在設置指令的名字時應爲 xxxYyy 駝峯式命名法  
.directive('myDialog', function() {
  return {
    restrict: 'E', //做爲元素名使用
    transclude: true, //保留用戶在html中定義的內容
    scope: {}, //獨立做用域
    templateUrl: 'my-dialog.html', //加載模板所要使用的URL
    //replace ：若是爲true 則替換指令所在的元素，若是爲false 或者不指定，則把當前指令追加到所在元素的內部  
    link: function (scope, element) {
      scope.name = 'Jeff';
    }
  };
});

link函數的四個參數

擴展閱讀：自定義指令的各類屬性詳解