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函数的四个参数

扩展阅读：自定义指令的各类属性详解