【Angular】——指令

在博客《AngularJS-mvc》中对指令已经有一个大概的认识，Angular内置的指令一般是以ng-*的形式存在，指令可使得我们方便快捷的达到想要的前台效果，内置指令的使用可以通过Angular提供的官方API学习使用。而Angular最吸引人的地方是用户可以自定义指令。首先我们来认识一下自定义指令中几个参数的含义。

自定义指令：

使用module .directive(“指令名称”，function(){}）来添加自定义的指令。

要调用自定义指令，HTML元素上需要添加自定义指令名。使用驼峰法来命名一个指令例如： runoobDirective,在页面使用时需要以 - 分割,runoob-directive。具体如下——

<body ng-app="myApp">
   <runoob-directive></runoob-directive>  <!--调用-->
   <script>
       var app = angular.module("myApp",[]);
 
       app.directive("runoobDirective",function() {
          return {
              restrict : "A",template :"<h1>这里写的是要显示在页面的内容</h1>"//templateUrl:temp.html
 
        };
      });
   </script>
</body>

restrict 值可以是以下几种:

E 作为元素名使用

A 作为属性使用（默认方式）

C 作为类名使用

M 作为注释使用

调用：

元素名：<runoob-directive></runoob-directive>

属性： <divrunoob-directive></div>

类名： <divclass="runoob-directive"></div>

注释： <!--directive: runoob-directive - ->

以下为自定义指令hello不同调用方式的实例图：

template和templateURL使用其一

template：其中写的是html的标签元素。

templateUrl：可以指定html页面，在html中可以写大量的html标签

templateCache：缓存，可以将指令缓存起来，在多个模块使用

replace和transclude

使用自定义指令‘hello’的页面

Replace

结果：<hello>指令内部的div内容会被替换显示的内容如下：

Transclude

结果：<hello>指令内部的div中的内容没有被替换，显示如下：

link

可以用来操作页面上的DOM，使用方法类似jquery的使用。在AngularJS中内置了简化版的jquery，称为jquerylight。

Link常规包括三个参数：scope、element、attrs，如果要使用第四个参数需要结合属性require。

require

作用类似继承，可以给其赋值另外一个指令名。当前指令继承指定指令，可以调用其中的方法。

Link实例

三个参数、结合jquerylight绑定事件：

四个参数、使用require，继承上一个指令superman：

小结

简单的了解了自定义指令中的一些属性及其用法，自定义指令是AngularJS诱人的原因之一，初步了解使用中进行深入。

原文链接：https://www.f2er.com/angularjs/146933.html

【Angular】——指令

猜你在找的Angularjs相关文章