记录angular之directive指令的用法

1.实例1:从最简单的开始

<html ng-app='app'>
<body>
    <hello></hello>
</body>
<script src="../angular-1.0.3/angular.min.js">
</script> <script src="HelloDirect.js"></script>
</html>

对于以上代码里面的<hello>标签,浏览器显然是不认识的,它唯一能做的事情就是无视这个标签。那么,为了让浏览器能够认识这个标签,我们需要使用Angular来定义一个hello指令(本质上说就是自己来把<hello>这种玩意儿替换成浏览器能识别的那些标准HTML标签)。

来看这段温馨的JS代码:

var appModule = angular.module('app', []);
appModule.directive('hello', function() {
    return {
       restrict: 'E',
       template: '<div>Hi there</div>',
       replace: true
   };
});

以上代码大概看两眼就可以了,不要太在意细节。

然后我们就可以在浏览器里面看到这样的内容:

实际产生的标签结构是这样的:

可以看到,<hello>这个东东已经被<div>Hi there</div>这个标签替换掉了,这也是以上JS代码里面replace:true这行配置的作用,代码里面的template配置 项当然就是我们要的div标签啦,至于restrict:’E’这个配置项的含义,请看下表:

ok,看完上面的表格,对于restrict这个属性相信你已经秒懂了,那么我们来玩儿点花样吧。如果我们需要替换的HTML标签很长,显然不能用 拼接字符串的方式来写,这时候我们可以用templateUrl来替代template,从而可以把模板写到一个独立的HTML文件中。

2.实例2:transclude(变换)


//先看例子,JS代码:
var appModule = angular.module('app', []); 
appModule.directive('hello', function() {
     return { 
         restrict: 'E', 
         template: '<div>Hi there <span ng-transclude></span></div>', 
         transclude: true
    }; 
}); 
//HTML代码:
<html ng-app='app'>
<head> 
     <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
</head> 
<body>
<hello> 
   <br/> 
   <span>原始的内容,</span>
   <br/>
   <span>还会在这里。</span> 
</hello>
<hello> </hello>
</body> 
<script src="../angular-1.0.3/angular.min.js"></script> 
<script src="Transclude.js"></script>
</html> 

运行效果如下:

生成的HTML标签结构如下:

和第一个例子对比,这个例子的JS和HTML代码都略有不同,JS代码里面多了一个transclude: true,HTML代码里面在<hello>内部出现了子标签。

按照我们在第一个例子中的说法,指令的作用是把我们自定义的语义化标签替换成浏览器能够认识的HTML标签。那好,如果我们自定义的标签内部出现了子标签,应该如何去处理呢?很显然,transclude就是用来处理这种情况的。

对于当前这个例子,transclude的作用可以简化地理解成:把<hello>标签替换成我们所编写的HTML模板,但是<hello>标签内部的内容保持不变

很显然,由于我们没有加replace:true选项,所以<hello>标签还在,没有被替换掉。同时,通过这个例子你还还会发现一 个暗藏的属性,那就是浏览器实际上非常智能,虽然它并不认识<hello>这个标签,但是页面没有出错,它只是默默地把这个标签忽略掉了!怎 么样?是不是碉堡了?

你可以自己在上面的JS代码里面加上replace:true,然后再看生成的HTML结构。