首页 > 代码库 > angular 自定义指令 详解--restrict、restrict、replace

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

2024-09-23 18:59:37   217人阅读

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


联系
我们