Angularjs[25] - 自定义指令（1）（restrict, template, replace 属性）

最新推荐文章于 2018-08-14 23:37:20 发布

转载最新推荐文章于 2018-08-14 23:37:20 发布 · 122 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/bky-1083/p/6358997.html

文章标签：

#javascript #ViewUI

本文详细介绍了Angular中自定义指令的方法，包括不同限制类型（E/C/A/M）的应用场景及示例，同时提供了如何设置template及replace参数的具体指导。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义指令：

module.directive(name,directiveFactory)
@see $compileProvider.directive()

⚠️ 不要使用 ng 为指令，若指令名为 xxx-yyy，在设置指令名时应为 xxxYyy 即驼峰命名法。

restrict: 可以任意组合四种风格，如果忽略 restrict，默认为A。

字母	风格	示例
E	元素	<my-dir></my-dir>
C	样式类	<span class="my-dir:exp;"></span>
A	属性	<span my-dir="exp"></span>
M	注释	<!-- directive: my-dir:exp-->

template: 模板内容，这个内容根据 replace 参数设置替换节点或仅替换节点内容。

replace: 若此配置为 true 则替换指令所在元素，若为 false 或不指定，则把当前指令追加到所在元素内。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div ng-app="myApp">
        <custom-tags>222</custom-tags>
        <div class="custom-tags"></div>
        <div custom-tags></div>
        <!-- directive: custom-tags -->
    </div>

<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
<script type="text/javascript" src="app/index.js"></script>
</body>
</html>

var myApp = angular.module('myApp',[],['$compileProvider',function ($compileProvider) {
    $compileProvider.directive('customTags',function () {
        return{
            restrict: 'ECAM',
            template:'<div>custom-tags-html</div>',
            replace: true
        }
    });
}])