自定义指令(directive)

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

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

例子：使用驼峰法来命名一个指令， demoDirective, 但在使用它时需要以 - 分割, demo-directive:

<!DOCTYPE html>

<html>

<head>

　　<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'/>

　　<title>自定义指令（directive）的简单demo</title>

</head>

<body ng-app="myApp">

  <h3>自定义指令（directive）</h3>

  <hr>

  <h4>自定义指令的四种调用方式：</h4>

	元素名调用： <demo-directive></demo-directive>

  属性调用：<div demo-directive></div>

  <pre>

    元素名与属性控制的js代码：

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

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

        return {

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

        };

    });

  </pre>

  类名调用：<div class="demo-directive"></div>

  <pre>

    类名控制的js代码：

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

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

        return {

            restrict : "C",

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

        };

    });

  </pre>

  注释调用：<!-- directive: demo-directive -->

  <pre>

    注释控制的js代码：

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

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

        return {

            restrict : "M",

            replace : true,

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

        };

    });

  </pre>

  <script type="text/javascript" src="https://code.angularjs.org/1.7.5/angular.min.js"></script>

  <script type="text/javascript">

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

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

        return {

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

        };

    });

  </script>

</body>

</html>

自定义指令的限制使用：你可以限制你的指令只能通过特定的方式来调用。

restrict 值可以是以下几种:

E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

angularjs - 自定义指令(directive)的更多相关文章

  1. angularjs自定义指令Directive

    今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...

  2. angularJs自定义指令.directive==类似自定义标签

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

  3. AngularJS自定义指令directive：scope属性 （转载）

    原文地址:http://blog.csdn.net/VitaLemon__/article/details/52213103 一.介绍: 在AngularJS中,除了内置指令如ng-click等,我们 ...

  4. AngularJS 自定义指令directive 介绍

    --------------------------------------------------------------------------- 指令的作用是把我们自定义的语义化标签替换成浏览器 ...

  5. angularjs 一篇文章看懂自定义指令directive

     壹 ❀ 引 在angularjs开发中,指令的使用是无处无在的,我们习惯使用指令来拓展HTML:那么如何理解指令呢,你可以把它理解成在DOM元素上运行的函数,它可以帮助我们拓展DOM元素的功能.比如 ...

  6. AngularJs自定义指令详解（1） - restrict

    下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...

  7. AngularJS: 自定义指令与控制器数据交互

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 浅析AngularJS自定义指令之嵌入(transclude)

    AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...

  9. angularJs 自定义指令传值---父级与子级之间的通信

    angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...

随机推荐

  1. EVE-NG简单入门介绍

    此篇文章简单的介绍下模拟器EVE-NG的使用,具体包括Dynamips设备导入与运行,IOL设备的导入与运行,QEMU设备的导入与运行,客户端软件的安装,物理网络与虚拟网络的结合等. 一．导入镜像 D ...

  2. 初学python类编的一个求矩形小程序

    简单的程序不简单,里面包含类定义类,传参,初始化,方法调用,创建实例,格式输出.主要在python中随时定义变量随时用,我这道题题想好久就是我初识类,传参,不是所有参数都的加单引号.简单的东西,复杂话 ...

  3. Spring _day01_下载、概述、监听器

    Spring:SE/EE开发的一站式框架. ​ .一站式框架:有EE开发的每一层解决方案. ​ . WEB层 :SpringMVC ​ . Service层 :Spring的Bean管理,Spring ...

  4. R语言预测实战(游浩麟)笔记1

    预测流程 确定主题.指标.主体.精度.周期.用户.成本和数据七要素. 收集数据.内容划分.收集原则. 选择方法.主要方法有自相关分析.偏相关分析.频谱分析.趋势分析.聚类分析.关联分析.相关分析.互相 ...

  5. C++11-->单生产者，单消费者问题

    参考上一篇C++11并发编程 #include <iostream> #include <queue> #include <assert.h> #include & ...

  6. MFC动态创建对话框中的按钮控件并创建其响应消息

    转自:http://www.cnblogs.com/huhu0013/p/4626686.html 动态按钮(多个)的创建: 1.在类中声明并定义按钮控件的ID #define IDC_D_BTN 1 ...

  7. erlang证书加密

    -module(...). -include("ewp.hrl").-include("backend.hrl").-include_lib("pub ...

  8. 第5次作业 -- 基于Jmeter的 性能测试

    1.1 实验步骤(5分): 首先安装JMeter,下载之后cd到bin目录下运行sh jmeter就会完成安装,跳出来一个GUI界面 然后添加HTTP请求,在设置里面填写目标网站:cs.ntu.edu ...

  9. StringBuffer&StringBuilder

    对字符串修改时,用到StringBuffer&StringBuilder,能够多次修改对象并且不产生新的未使用对象 StringBuilder线程不安全(不能同步访问),速度有优势,多数情况下 ...

  10. java多线程中的调度策略

    两种线程的调度模式: 抢占式调度: 抢占式调度指的是每条线程执行的时间.线程的切换都由系统控制,系统控制指的是在系统某种运行机制下,可能每条线程都分同样的执行时间片,也可能是某些线程执行的时间片较长, ...