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,这几个理解起来相对容易很多,因为它们只涉及到了表现,而没 ...
随机推荐
- 一、tars简单介绍 二、tars 安装部署资料准备
1.github地址https://github.com/Tencent/Tars/ 2.tars是RPC开发框架,目前支持c++,java,nodejs,php 3.tars 在腾讯内部已经使用了快 ...
- JS DOM 实现删除和添加的功能
<!DOCTYPE html> <html> <head> <title>发表评论</title> <link rel="s ...
- js模块化规范—commonjs
commonjs规范说明 每个js文件都可当作一个模块 在服务器端: 模块的加载是运行时同步加载的(不会阻塞,等待时间回比较长).在浏览器端: 模块需要提前编译打包处理 commonjs规范基本语法 ...
- (5)Python字典
- Android studio中布局文件出现render problem问题
当做layout时,可能会出现render problem的情况.意思就是无法预览当前布局页面,这种情况是因为API版本太高造成的.只需要修改API为更低版本即可.
- LightGBM介绍及参数调优
1.LightGBM简介 LightGBM是一个梯度Boosting框架,使用基于决策树的学习算法.它可以说是分布式的,高效的,有以下优势: 1)更快的训练效率 2)低内存使用 3)更高的准确率 4) ...
- CSAPP：第三章程序的机器级表示2
CSAPP:程序的机器级表示2 关键点:算术.逻辑操作 算术逻辑操作1.加载有效地址2.一元二元操作3.移位操作 算术逻辑操作 如图列出了x86-64的一些整数和逻辑操作,大多数操作分成了指令类( ...
- nginx进行反向代理，80端口使用
环境说明:centos7 安装版本:tengine2.2.2 实现目的: 想用本地80端口,代理其它服务器的非80端口,实现80端口复用 [root@tiaobanji conf]# cat ngin ...
- （5）HomeAssistant mqtt-433-esp8266-arduino-传感器
Home Assistant Integrations使用 https://github.com/1technophile/OpenMQTTGateway/wiki/Home-assistant-in ...
- linux日志：syslogd和klogd及syslog
一. 日志守护进程 syslogd和klogd是很有意思的守护进程,syslogd是一个分发器,它将接收到的所有日志按照/etc/syslog.conf的配置策略发送到这些日志应该去的地方,当然也包括 ...