除了 AngularJS 内置的指令外，我们还可以创建自定义指令。

你可以使用 .directive 函数来添加自定义的指令。

要调用自定义指令，HTML 元素上需要添加自定义指令名。

使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body ng-app="myApp">

<runoob-directive></runoob-directive>

<script>

var app = angular.module("myApp", []);

app.directive("runoobDirective", function() {

    return {

        template : "<h1>自定义指令!</h1>"

    };

});

</script>

</body>

</html>

你可以通过以下方式来调用指令：

  • 元素名       <runoob-directive></runoob-directive>
  • 属性          <div runoob-directive></div>
  • 类名          <div class="runoob-directive"></div>
  • 注释          <!-- directive: runoob-directive -->
<!DOCTYPE html>

<html><head>

    <meta charset="utf-8">

    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body ng-app="myApp">

<runoob-directive></runoob-directive>

<div runoob-directive></div>

<div class="runoob-directive"></div>

<!-- directive: runoob-directive -->

<script>

    var app = angular.module("myApp", []);

    app.directive("runoobDirective", function() {

        return {

            restrict : "EACM",

            template : "<h1>自定义指令!</h1>"

        };

    });

</script>

</body>

</html>

restrict 值可以是以下几种:

  • E 作为元素名使用
  • A 作为属性使用
  • C 作为类名使用
  • M 作为注释使用

restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

AngularJS:directive自定义的指令的更多相关文章

  1. angularjs directive (自定义标签解析)

    angularjs directive (自定义标签解析) 定义tpl <!-- 注意要有根标签 --> <div class="list list-inset" ...

  2. angularjs 创建自定义的指令

    创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTMl 元素上需要添加自定义指令名 ...

  3. angularjs Directive自定义指令详解

    作用:需要用Directive有下面的情景: 1.使你的Html更具语义化,不需要深入研究代码和逻辑即可知道页面的大致逻辑. 2. 抽象一个自定义组件,在其他地方进行重用. 3.使用公共代码,减少重复 ...

  4. angularjs directive and component 指令与组件 ( 1.5.0 以后 )

    之前写过一篇了 http://www.cnblogs.com/keatkeat/p/3903673.html 但某些部分写的不太清楚,甚至有点错误,所以今天特地在这里再来谈谈. 这篇主要是说指令的隔离 ...

  5. 走进AngularJs(三)自定义指令-----（上）

    一.有感而发的一些话 在学习ng之前有听前辈说过,angular上手比较难,初学者可能不太适应其语法以及思想.随着对ng探索的一步步深入,也确实感觉到了这一点,尤其是框架内部的某些执行机制,其复杂程度 ...

  6. 带你走近AngularJS - 创建自定义指令

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...

  7. 学习AngularJs:Directive指令用法（完整版）

    这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下   本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...

  8. 36.创建自定义的指令directive

    转自:https://www.cnblogs.com/best/tag/Angular/ 1. <html> <head> <meta charset="utf ...

  9. 走进AngularJs(四)自定义指令----（中）

    上一篇简单介绍了自定义一个指令的几个简单参数,restrict.template.templateUrl.replace.transclude,这几个理解起来相对容易很多,因为它们只涉及到了表现,而没 ...

随机推荐

  1. （转）Spring Boot 2 (八)：Spring Boot 集成 Memcached

    http://www.ityouknow.com/springboot/2018/09/01/spring-boot-memcached.html Memcached 介绍 Memcached 是一个 ...

  2. 刚学习java时的笔记, 有点渣, 毕竟都是从低往高走

    一片很有意义的论文: 写给那些在技术路上奔跑的人们!!!!! http://blog.csdn.net/xqhrs232/article/details/24885971 乱码处理 1.get处理 解 ...

  3. jvm运行时内存模式

    jvm内存模型 内存模型粗略划分为:堆和栈 详细划分为:堆,虚拟机栈,方法区,本地方法区,程序计数器 程序计数器: 为了线程切换后能恢复到正确的执行位置,每条线程都需要有一个独立的程序计数器,各条线程 ...

  4. 转://利用从awr中查找好的执行计划来优化SQL

    原文地址:http://blog.csdn.net/zengxuewen2045/article/details/53495613 同事反应系统慢,看下是不是有锁了,登入数据库检查,没有异常锁定,但发 ...

  5. P1184 高手之在一起（字典树模板题，hash算法， map）

    哎,唯一值得说明的是,这道题的输入有bug 先把字典树的算法模板放一下 #include<iostream> #include<cstring> using namespace ...

  6. 【angularjs】使用angular搭建项目，获取dom元素

    方法一:需要引入jq,否则会报angularJS1 Error: [jqLite:nosel](不建议使用) <div id="testID" class="tes ...

  7. （1） 安卓导入mqtt包基本通信

    参考资料:http://blog.csdn.net/qq_17250009/article/details/52774472 MQTT官网:http://mqtt.org/ MQTT介绍:http:/ ...

  8. C语言初学者关于数组指针的深度讨论

    一.什么是数组指针? 即是数组的指针.首先它是一个指针,指向数组,指针本身占4个字节. 二.数组指针的使用 int a[3][5]; int (*p)[5]; p=&a; 第二行定义了一个数组 ...

  9. 【中文版 | 论文原文】BERT：语言理解的深度双向变换器预训练

    BERT:Pre-training of Deep Bidirectional Transformers for Language Understanding 谷歌AI语言组论文<BERT:语言 ...

  10. rabbitMQ教程（五）rabbitmq 指令 以及解决web管理界面无法使用guest用户登录

    安装最新版本的rabbitmq(3.3.1),并启用management plugin后,使用默认的账号guest登陆管理控制台,却提示登陆失败. 翻看官方的release文档后,得知由于账号gues ...