AngularJS-study自定义指令

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

控制器

directive('my-directive',[function(){
    return{
        template : "

我是自定义指令内的模板

", // 默认只支持属性和标签 restrict : "ECMA", // 如果是注释的话一定要用replace replace : true, } }])

视图

标签形式


属性形式


class形式


注释形式

效果展示

AngularJS-study自定义指令_第1张图片
Paste_Image.png

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

directive()

directive()接受两个参数

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

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

template

返回一段字符串作为模板

restrict

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

replace(替换元素)

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

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

当replace:false //(默认)

AngularJS-study自定义指令_第2张图片
Paste_Image.png

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

当replace:true

AngularJS-study自定义指令_第3张图片
Paste_Image.png

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

最后加一个templateUrl属性

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

templateUrl : "./footer.html"

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

你可能感兴趣的:(AngularJS-study自定义指令)