AngularJS:directive自定义的指令
除了 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自定义的指令的更多相关文章
- angularjs directive (自定义标签解析)
angularjs directive (自定义标签解析) 定义tpl <!-- 注意要有根标签 --> <div class="list list-inset" ...
- angularjs 创建自定义的指令
创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTMl 元素上需要添加自定义指令名 ...
- angularjs Directive自定义指令详解
作用:需要用Directive有下面的情景: 1.使你的Html更具语义化,不需要深入研究代码和逻辑即可知道页面的大致逻辑. 2. 抽象一个自定义组件,在其他地方进行重用. 3.使用公共代码,减少重复 ...
- angularjs directive and component 指令与组件 ( 1.5.0 以后 )
之前写过一篇了 http://www.cnblogs.com/keatkeat/p/3903673.html 但某些部分写的不太清楚,甚至有点错误,所以今天特地在这里再来谈谈. 这篇主要是说指令的隔离 ...
- 走进AngularJs(三)自定义指令-----（上）
一.有感而发的一些话 在学习ng之前有听前辈说过,angular上手比较难,初学者可能不太适应其语法以及思想.随着对ng探索的一步步深入,也确实感觉到了这一点,尤其是框架内部的某些执行机制,其复杂程度 ...
- 带你走近AngularJS - 创建自定义指令
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...
- 学习AngularJs:Directive指令用法（完整版）
这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...
- 36.创建自定义的指令directive
转自:https://www.cnblogs.com/best/tag/Angular/ 1. <html> <head> <meta charset="utf ...
- 走进AngularJs(四)自定义指令----（中）
上一篇简单介绍了自定义一个指令的几个简单参数,restrict.template.templateUrl.replace.transclude,这几个理解起来相对容易很多,因为它们只涉及到了表现,而没 ...
随机推荐
- C#事件の.net下的EventArgs和EventHandler
事件参数(EventArgs) .Net框架里边提供的一个委托EventHandler来Handle事件. 一样,搞一个场景(这个场景是书里的):买车.经销商(CarDealer)会上新车(NewCa ...
- day05 数据基本类型及内置方法：字符串str、列表list
一:可变不可变类型 1.可变类型 值改变,id不变,说明是直接改变原值,是可变类型 2.不可变类型 值改变,id也跟着改变,说明是产生了新的值,是不可变类型 二:数字类型 1.整型Int 用途: 记录 ...
- 联想Y700安装显卡驱动和CUDA8.0
一显卡驱动安装 1 安装驱动安装软件 2 自动检测下载对应版本驱动 3下载完成后,点击开始,解压出来临时安装文件 由于是临时安装文件,退出就会关闭 4所以在没有关闭情况下,打开重新打开一次setup, ...
- Flask 框架 debug=Ture 和Json解码：
Flask框架常用配置文件: 以下推荐四种方法: (一):创建一个配置类. (二):正常代码配置文件. 接下下来两种方法需要新建文件: 步骤为: 1:在当前目录下新建一个文件,名字为:config.i ...
- 初学Python——函数
一.函数定义 def name( parameters): #没有参数括号内可以为空 "函数描述" #其实就是注释 <代码块> return [expression] ...
- kali 源
#阿里云 deb http://mirrors.aliyun.com/kali kali-rolling main non-free contrib deb-src http://mirrors.al ...
- Java8之lambda表达式
一.什么是lambda表达式? Lambda 是一个匿名函数,我们可以把 Lambda 表达式理解为是一段可以传递的代码(将代码像数据一样进行传递).可以写出更简洁.更灵活的代码.作为一种更紧凑的代码 ...
- djongo：Django和MongoDB连接器
在Django项目中使用MongoDB作为后端数据库,且不改变Django的ORM框架.实现Django用户管理程序对MongoDB数据库中文件的增加和修改. 用法 1.pip install djo ...
- JavaEE学习之Spring Security3.x——模拟数据库实现用户，权限，资源的管理
一.引言 因项目需要最近研究了下Spring Security3.x,并模拟数据库实现用户,权限,资源的管理. 二.准备 1.了解一些Spring MVC相关知识: 2.了解一些AOP相关知识: 3. ...
- FineUIMvc随笔（2）怎样在控件中嵌套 HTML
声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. 用户需求 有网友在<FineUI总群1>问这么一个问题:怎么把 HTML 嵌套在控件中? 这是很多刚学习 FineU ...