angularjs 指令（directive）详解(1)

时间 2020-08-18

标签 angularjs 指令 directive 详解栏目 AngularJS 繁體版

原文原文链接

什么是directive？咱们先来看一下官方的解释： angularjs

At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS'sHTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and its children. bootstrap

Angular comes with a set of these directives built-in, like ngBind, ngModel, and ngClass. Much like you create controllers and services, you can create your own directives for Angular to use. When Angular bootstraps your application, the HTML compiler traverses the DOM matching directives against the DOM elements. api

像ngBind，ngModel和ngClass等指令都是angular内置的directive，当咱们感受这些directive不能知足咱们的要求时，则能够本身动手建立directive。浏览器

咱们定义的directive通常使用camelCase（驼峰）命名规则，可是因为HTML是不区分大小写的，因此咱们的directive在DOM中只能使用小写，可使用如下几种方式来表示：缓存

例如ngBind能够表示为如下几种方式： app

  <span ng-bind="name"></span> <br/>
  <span ng:bind="name"></span> <br/>
  <span ng_bind="name"></span> <br/>
  <span data-ng-bind="name"></span> <br/>
  <span x-ng-bind="name"></span> <br/>

但咱们通常经常使用下划线来表示，如：ng-bing异步

了解完指令的定义，那么接下来咱们学习如何本身建立一个指令。 ide

一.directive的写法以及参数说明：学习

angular.module("app",[])
 .directive("directive",function(){
    return{
     	restrict:"EACM", //指明指令在DOM中以什么样的形式被声明
		priority:0, //该指令的执行优先级
		terminal:true/false, //是不是最后一组执行的directive。
		template:"<div></div>", //模板
		template:"**/**.html", //指定模板的url
		replace:true/false,  //替换或拼接到当前元素
		transclude:true/false/'element', //将内容编译后放入指定地方
		scope:true/false/{}, //建立一个新的做用域
		require:[],  //请求其余directive的controller
		controller:function/controllerName, //建立一个控制器，可与其余              .                                                    directive共享
		link:function, //操控DOM元素
		compile:function, //经过表示服修改DOM模板
    };
})

二.directive返回参数详解

1.restrict

可选参数，指明指令在DOM里面以什么形式被声明，默认为A(属性)；

E(元素)：<directive></directive>

A(属性)：<div directive='name'></div>

C(类)： <div class='directive'></div>

M(注释)：<–directive:directive name–>

2.priority

可选参数，指明指令的优先级，若在单个DOM上有多个指令，则优先级高的先执行，若是优先级相同，则执行顺序是不肯定的。

3.terminal

可选参数，能够被设置为true或false，若设置为true，则表示当前的priority将会成为最后一组执行的directive。任何directive与当前的优先级相同的话，他们依然会执行，但顺序是不肯定。优先级低于此指令的其余指令则无效，不会被调用。

4.template

可选参数，html代码，以下所示，

//js代码
angular.module("app",[])
 .directive("hello",function(){
	return{
		restrict:'EA',
		template:"<div>templateUrl</div>"
	};
 })
//html代码
<div>
	<hello></hello>
</div>

则输出结果是：

templateUrl

5.templateUrl

可选参数，与template基本一致，但模版经过指定的url进行加载。由于模版加载是异步的，因此compilation、linking都会暂停，等待加载完毕后再执行。

因为加载html模板是经过异步加载的，若加载大量的模板会拖慢网站的速度，能够先缓存模板来提升速度（可使用ng-template或$templateCache来缓存模板，详细用法在这里很少说，请自行查询）

6.replace

可选参数，默认为false。若是设置为true，那么模版将会替换当前元素，不然做为子元素添加到当前元素中。

当设为true时：

//js代码
angular.module("app",[])
 .directive("hello",function(){
	return{
		restrict:'EA',
		replace：true,
		template:"<div>templateUrl</div>"
	};
 })
//html代码
<div>
	<hello></hello>
</div>

那么渲染以后的代码为：

 <div>
	<div>templateUrl</div>
</div>

能够看到，<hello></hello>已经被<div>templateUrl</div>这个标签替换掉了。

仍是以上代码，若是设为false或不设值时，渲染以后的代码为：

<div>
	<hello>
		<div>templateUrl</div>
	</hello>
</div>

能够本身比较一下true和false的区别。

7.transclude

可选参数，默认值为fasle。

指令的做用是把咱们自定义的语义化标签替换成浏览器可以认识的HTML标签。那么，若是咱们自定义的标签内部出现了子标签，应该如何去处理呢？

transclude可让咱们提取包含在指令那个元素里面的内容，再将它放置在指令模板的特定位置。咱们可使用ng-transclude来指明了应该在什么地方放置transcluded内容。

看以下代码：

 <!doctype html>
<html ng-app="myApp">
<head>
  <script src="angular.min.js"></script>
</head>
<body>

  <div ng-controller='controller'>
  	<hello>
       {{text}}
    </hello>
	<hello></hello>
  </div>

  <script>
    var app = angular.module('myApp',[]);
    app.controller('controller',function($scope){
      $scope.text = 'I am transclude';
    });
    app.directive('hello',function(){
     return {
        scope:{},  
        restrict: 'AE',
        transclude: true,
        template: '<div ng-transclude>hello world</div>'
     }
    });
  </script>
</body>
</html>

上边代码的输出结果是：

I am transclude

hello world

当transclude设为true的时候，会建立一个新的transclude空间，而且继承了父做用域

咱们再看看生成的html为下图所示，

能够发现第一个<hello>标签里的文本“hello world”消失了，这是由于被transclude内容替换掉了。这里的transclude内容就是{{text}}

咱们将true换为'element'，以下图所示：

转换整个元素，包括其余优先级较低的directive。使用时，忽略其模板属性。