angularjs 创建自定义的指令
创建自定义的指令
除了 AngularJS 内置的指令外，我们还可以创建自定义指令。
你可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令，HTMl 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:
你可以通过以下方式来调用指令：
- 元素名
- 属性
- 类名
- 注释
以下实例方式也能输出同样结果:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<body ng-app="myApp">
<p>元素名</p>
<runoob-directive></runoob-directive>
<p>类名</p>
<div class="class-directive"></div>
<p>属性</p>
<div attribute-directive></div>
<p>注释</p>
<!-- directive: commance-directive -->
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<div><ul><li>1</li><li>1</li><li>1</li><li>1</li></ul></div>"
};
});
app.directive("classDirective", function() {
return {
restrict: "C",
template : "<div><ul><li>must set the restrict : \"C\"</li><li>class directive</li><li>class directive</li><li>class directive</li></ul></div>"
};
});
app.directive("attributeDirective", function() {
return {
template : "<div><ul><li>Attribute directive</li><li>Attribute directive</li></ul></div>"
};
});
app.directive("commanceDirective", function() {
return {
restrict : "M",
replace : true,
template : "<div><ul><li>commance directive</li><li>commance directive</li></ul></div>"
};
});
</script>
</body>
</body>
</html>
限制使用
你可以限制你的指令只能通过特定的方式来调用。
E只限元素名使用A只限属性使用C只限类名使用M只限注释使用
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
angularjs 创建自定义的指令的更多相关文章
- 带你走近AngularJS - 创建自定义指令
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...
- 带你走近AngularJS - 创建自己定义指令
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自己定义指令 ------------ ...
- AngularJS:directive自定义的指令
除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 使用驼峰法来命 ...
- 36.创建自定义的指令directive
转自:https://www.cnblogs.com/best/tag/Angular/ 1. <html> <head> <meta charset="utf ...
- AngularJs创建自定义Service
AngularJs可以创建自定义的service.下面的自定义service实现一个double倍数的服务: 参考下面语法: app.service('double', function () { t ...
- 37.创建自定义的指令的限制使用 通过restrict 设置
转自:https://www.cnblogs.com/best/tag/Angular/ 1. 元素名 <runoob-directive></runoob-directive> ...
- AngularJs创建一个带参数的自定义方法
学习这篇之前,先要从这篇<AngularJs创建自定义Service>http://www.cnblogs.com/insus/p/6773894.html 开始. 看看: app.con ...
- 带你走近AngularJS 之创建自定义指令
带你走近AngularJS 之创建自定义指令 为什么使用AngularJS 指令? 使用过 AngularJS 的朋友应该最感兴趣的是它的指令.现今市场上的前端框架也只有AngularJS 拥有自定义 ...
- AngularJS -- 指令(创建自定义指令)
点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ 什么是指令 注:本指南是针对已经熟悉AngularJS基础知识的开发人员.如果你才刚 ...
随机推荐
- jsp页面可以巧用模态框
jsp页面使用模态框配合ajax出来的效果真的没话说,当然你也可以使用模态框配合action,但是在删除和更新的时候传值有点麻烦,用ajax 就没有这些问题 ,比如删除代码的时候在js文件中传值可以这 ...
- asp.net中过滤器的两种写法
1.写在一个单独的类库中在web.config中进行配置 <httpModules> <add name="" type="类的全名称,程序集的名称&q ...
- 一.去除字符串中的html标记及标记中的内容
--1.创建函数 )) ) as begin declare @i int begin set @i=len(@maco) set @maco=replace(@maco, substring(@ma ...
- 删除重复记录的SQL语句
1.所有字段均重复的记录(重复记录保留一条) Select distinct * into #Tmp from tblName Drop table tblName Select * into tbl ...
- 创建 序列 存储过程 job
掌握了 oracle中的 dbms_lock 函数,该函数 主要用于暂停执行的程序 1.用意 写job 以10分钟 为单元,前10分钟 从 1到10 插入测试表, 中间10分钟从 11到20插入测试表 ...
- Hibernate 性能优化之二级缓存
二级缓存是一个共享缓存,在二级缓存中存放的数据是共享数据特性 修改不能特别频繁 数据可以公开二级缓存在sessionFactory中,因为sessionFactory本身是线程安全,所 ...
- javascript 常用array类型方法
concat:基于当前数组中的所有项创建一个新数据,会创建当前数组一个副本,然后将接受到的参数放到数组末尾,最后返回新数组.如果没有参数,则复制当前数组并返回副本. slice:基于当前数组中一个或多 ...
- chrome扩展,如何阻止浏览自动关闭桌面通知.
(!!!!以前的好用的, 现在不行了~) 做chrome扩展桌面通知, 可能不想让浏览器自动关闭某个重要的桌面通知.那就不要使用 chrome.notifications.create 可以用 Web ...
- windows phone使用sharpcompress进行解压压缩文件
在做移动端时,当我们需要从服务器获得多个文件时,为了节约流量,服务器一般会返回一个压缩包,那我们就是下载完成后,在手机中进行解压到指定位置 SharpCompress就是可以在手机中进行解压一个类库( ...
- 自动化构建工具gulp
1.优点 1.1 易于使用 通过代码优于配置的策略,gulp让简单的任务简单,复杂的任务可管理 1.2 构建快速 利用node.js流的威力,你可以快速构建项目并减少频繁的IO操作 1.3 插件高质 ...