码迷,mamicode.com
首页 > 其他好文 > 详细

angular 自定义指令 详解--restrict、restrict、replace

时间:2017-05-20 21:13:41      阅读:694      评论:0      收藏:0      [点我收藏+]

标签:详解   class   space   根据   内容   通过   logs   自定义   module   

Angularjs 允许根据实际业务需要自定义指令, 通过angular全局对象下的 directive 方法实现。可以自定义属性、自定义标签、自定义功能

接下来定义一个名叫custom的指令,并利用这个自定义指令来实现元素的替换

html代码:

<body ng-app="app">
<p custom></p>
<custom></custom>

js代码:

 var app = angular.module("app",[]);
    //自定义指令和定义控制器相似
    app.directive("custom",[function () {
        return{  //返回指令对象            
            restrict:"EA",
            template:"<h1>这是第一个自定义指令模板<p>p标签元素</p></h1> ",
            replace:true, 

} }])

directive:表示我们要定义一个自定义的指令,指令的名称为 custom,后面的函数用来定义指令的特征, 回调函数中返回的是一个指令对象

restrict:是指令的类型,有四种取值:

     ①   E:以元素的方式出现

     ②   A:以属性的方式出现

     ③   C:以类的方式出现(用的比较少)

     ④   M:以注释的方式(用的少)

template:是指令模板

replace:顾名思义,这是替换的意思,默认为 false,就是将模版的内容追加到元素中,如果设置为 true,那么模版的内容将会替换元素的内容

这里有一个注意点,如果

  template:"<h1>这是第一个自定义指令模板</h1><p>p标签元素</p> ",
  replace:true,

这种情况下,没有包裹的根元素,h1 和 p是同级元素的情况下,使用 replace:true 会报错,所以,指令模板必须要有一个根元素包裹。

 

angular 自定义指令 详解--restrict、restrict、replace

标签:详解   class   space   根据   内容   通过   logs   自定义   module   

原文地址:http://www.cnblogs.com/xiaoyanZhang/p/6883095.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!