angularjs - 自定义指令(directive)
自定义指令(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)的更多相关文章
- angularjs自定义指令Directive
今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...
- angularJs自定义指令.directive==类似自定义标签
创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名 ...
- AngularJS自定义指令directive：scope属性 （转载）
原文地址:http://blog.csdn.net/VitaLemon__/article/details/52213103 一.介绍: 在AngularJS中,除了内置指令如ng-click等,我们 ...
- AngularJS 自定义指令directive 介绍
--------------------------------------------------------------------------- 指令的作用是把我们自定义的语义化标签替换成浏览器 ...
- angularjs 一篇文章看懂自定义指令directive
壹 ❀ 引 在angularjs开发中,指令的使用是无处无在的,我们习惯使用指令来拓展HTML:那么如何理解指令呢,你可以把它理解成在DOM元素上运行的函数,它可以帮助我们拓展DOM元素的功能.比如 ...
- AngularJs自定义指令详解（1） - restrict
下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...
- AngularJS: 自定义指令与控制器数据交互
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 浅析AngularJS自定义指令之嵌入(transclude)
AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...
- angularJs 自定义指令传值---父级与子级之间的通信
angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...
随机推荐
- 帝国cms中当调用当前信息不足时，继续取其他数据
<?php$sql=$empire->query("select * from table1 order by id limit 20"); $num = mysql_ ...
- bootstrap全局样式
内联子标题: 显示如下: 主体副本: 显示如下: 对齐类: 显示如下: 强调类: 显示如下: 缩略语: 地址: 表格: 加一个class:“table-striped” js里面的奇数偶数行(odd) ...
- 关于GitHub
gitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名gitHub 对于程序员来说就相当于一个仓库可以把自己写的东西放到网上 要想使用GitHub必须 ...
- flask 第六章 人工智能 百度语音合成 识别 NLP自然语言处理+simnet短文本相似度 图灵机器人
百度智能云文档链接 : https://cloud.baidu.com/doc/SPEECH/index.html 1.百度语音合成 概念: 顾名思义,就是将你输入的文字合成语音,例如: from a ...
- Js函数基本介绍
1. 函数的创建 在JavaScript里面创建函数的关键字为function 函数名:就是在我们调用函数的时候需要书写的标识符 形参:全称为形式参数,调用函数的时候,这个函数所需要的参数是什么 实参 ...
- 微信浏览器安卓手机video浮在最上层问题
微信浏览器安卓手机video浮在最上层问题 //x5-video-player-type="h5" x5-video-player-fullscreen="true&qu ...
- Oracle入门之表结构的管理
建表的基本语法: create table table_name( field1 datatype, field1 datatype, field1 datatype, ... ) 注:table_n ...
- Oracle学习笔记之触发器
触发器 触发器(trigger)是一些过程,与表关系密切,用于保护表中的数据,当一个基表被修改(INSERT.UPDATE或DELETE)时,触发器自动执行,例如通过触发器可实现多个表间数据的一致性和 ...
- Hyperledger Fabric 建立一个简单网络
Building you first network 网络结构: 2个Orgnizations(每个Org包含2个peer节点)+1个solo ordering service 打开fabric-sa ...
- esp8266网络自动对时 串口字符连接 并显示 12864i2c u8g2库
给别人定做的 做的 集成了 烟雾传感器dht11u8g2网络 自动对时 #include <dht11.h>//程序中调用了dht11的库#include <Arduino.h> ...