AngularJS-study自定义指令

先从定义一个简单的指令开始。 定义一个指令本质上是在HTML中通过元素、属性、类或注释来添加功能。
AngularJS的内置指令都是以ng开头，如果想自定义指令，建议自定义一个前缀代表自己的命名空间。
这里我们先使用my作为前缀:

控制器

directive('my-directive',[function(){
    return{
        template : "<h2>我是自定义指令内的模板</h2>",
        // 默认只支持属性和标签
        restrict : "ECMA",
        // 如果是注释的话一定要用replace
        replace  : true,
    }
}])

视图

<h1>标签形式</h1>
<my-directive></my-directive>   
<hr>
<h1>属性形式</h1>
<div my-directive></div>
<hr>
<h1>class形式</h1>
<div class="my-directive"></div>
<hr>
<h1>注释形式</h1>
<!-- directive:my-directive -->

效果展示

Paste_Image.png

下面我们分析一下上面的代码：

directive()

<code>directive()</code>接受两个参数

• my-directive：指的是指令的名字name
• factory_function：函数，指令的行为

应用启动时，以name作为该应用的标识注册factory_function返回的对象。
在factory_function中，我们可以设置一些选项来改变指令的行为。

template

返回一段字符串作为模板

restrict

该属性用于定义指令以什么形式被使用，这是一个可选参数，元素（E）、属性（A）、类（C）、注释（M），当然也可以写EAMC，代表全部形式可用。

replace(替换元素)

默认为 false，就是将模版的内容追加到元素中，如果设置为 true，那么模版的内容将会替换元素的内容

那么我们以以上代码为例看一下吧

当replace：false //(默认)

Paste_Image.png

模板插入到我们自定义的指令内部

当replace：true

Paste_Image.png

模板替换了我们自定义的指令内部

最后加一个templateUrl属性

这个就和上面的template很像了，只不过这次是通过URL请求一个模板

templateUrl : "./footer.html"

这里需要注意：URL模板只能在服务器上才能实现，而且footer.html内只能有一个最外层标签，注释及脚本的引用都只能在这个标签内使用，否则会报错。