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,这几个理解起来相对容易很多,因为它们只涉及到了表现,而没 ...
随机推荐
- 2293: Distribution Center 中南多校
Description The factory of the Impractically Complicated Products Corporation has many manufacturing ...
- UVA1442-Cav（扫描法）
Problem UVA1442-Cav Accept: 185 Submit: 679Time Limit: 3000 mSec Problem Description Input The inpu ...
- ndim 与 shape的区别
[[ ., ., .], [ ., ., .]] 在上面这个例子中,数组的ndim为2(它有两个维度(简单的辨别两层方括号)). 第一个维度的长度为2,也就是有两个子数组 第二个维度的长度为3,也就是 ...
- 自然周与自然月的Hive统计SQL
按照周或者月统计活跃数: 周: SELECT week, COUNT(DISTINCT pin), business_type FROM ( SELECT DISTINCT user_log_acct ...
- 重建UNDO表空间遭遇ORA-01548
今天开发那边的一套数据库的undo表空间不知道被谁设置成了自动扩展,然后所谓的屋漏偏逢连夜雨的是, 开发人员今天跑了一个很大的事物,然后直接后果就是undo表空间不断被扩展,直到把文件系统写爆了.没办 ...
- <网络编程>套接字介绍
1.端口:IANA(Internet Assigned Numbers Authority)维护着一个端口号分配状况的清单. 众所周知的端口(0-1023):由IANA分配和控制,可能的话,相同的端口 ...
- JS /javascript 解除网页屏蔽右键（无法复制）的代码
javascript:(function() { function R(a){ona = "on"+a; if(window.addEventListener) window.ad ...
- 任务调度工具Quartz入门笔记
一,导包 1)官网下载:http://www.quartz-scheduler.org/downloads/ 2)Maven <dependency> <groupId>org ...
- 性能调优2：CPU
关系型数据库严重依赖底层的硬件资源,CPU是服务器的大脑,当CPU开销很高时,内存和硬盘系统都会产生不必需要的压力.CPU的性能问题,直观来看,就是任务管理器中看到的CPU利用率始终处于100%,而侦 ...
- centos7 关闭selinux
关闭SeLinux 临时关闭:setenforce 0 永久关闭:vi /etc/selinux/config