Angular——自定义指令
基本介绍
有了很多内置指令,但是依然无法满足我们的需要,我们可以自己定义一个指令,实现默写功能。
基本使用
directive方法可以帮助我们自己定义一个指令,它的返回方式一共有四种,ECMA,代表所定义指令可以使用的环境
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-app="App">
<div tag=""></div>
<script src="../libs/angular.min.js"></script>
<script>
var App = angular.module('App', []);
App.directive('tag', function () {
return {
restrict: 'ECMA',
// template: '<ul><li>很</li><li>好</li></ul>',
templateUrl: './list.html',
replace: true
}
});
//可以直接输入字符串,也可以传入一个文件 传入文件同样是通过ajax请求的原理
//replace:可以将包裹的标签替换掉
// E:element 返回的是元素 <tag></tag>
// C:Class 返回的是类名 <div class='tag'></div>
// M:Mark 返回的是备注
<!-- directive:tag -->
// A:attribute 返回的是属性 <div tag></div>
</script>
</body>
</html>
Angular——自定义指令的更多相关文章
- Angular自定义指令(directive)
angular自定义指令,意我们可以通过angula自己定义指令,来实现我们的特殊要求,为所欲为,一支穿云箭,千军万马来相见 多少年的老规矩了,先看代码: <!DOCTYPE html> ...
- angular 自定义指令详解 Directive
在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足 ...
- angular 自定义指令 directive transclude 理解
项目中断断续续的用了下angular,也没狠下心 认真的学习.angular 特别是自定义指令这块 空白. transclude 定义是否将当前元素的内容转移到模板中.看解释有点抽象. 看解释有点抽象 ...
- Angular自定义指令directive:scope属性
在AngularJS中,除了内置指令如ng-click等,我们还可以自定义指令.自定义指令,是为了扩展DOM元素的功能.代码中,通过指定directive中的restrict属性,来决定这个指令是作为 ...
- Angular17 Angular自定义指令
1 什么是HTML HTML文档就是一个纯文本文件,该文件包含了HTML元素.CSS样式以及JavaScript代码:HTML元素是由标签呈现,浏览器会为每个标签创建带有属性的DOM对象,浏览器通过渲 ...
- angular自定义指令
1.在directive文件下创建指令的js文件 通常自定义指令需要声明模块(注意定义指令时, js内部指令名称需采用 aaAaBb驼峰的命名方式 html中使用的是aa-aa-bb) e.g (f ...
- angular -- 自定义指令和模板
angular 可以自定义一些指令,来简化我们前端的工作量. 第一种:简单指令示例: <h3>自定义指令</h3> <sheng></sheng> &l ...
- angular自定义指令命名的那个坑
Directive 先从定义一个简单的指令开始. 定义一个指令本质上是在HTML中通过元素.属性.类或注释来添加功能.AngularJS的内置指令都是以ng开头,如果想自定义指令,建议自定义一个前缀代 ...
- angular自定义指令相关知识及代码
原文地址 https://www.jianshu.com/p/0c015862156d 大纲 1.自定义指令之——属性指令 2.自定义属性指令的运行原理 3.自定义属性指令代码实践 4.自定义结构指令 ...
- angular自定义指令 repeat 循环结束事件;limitTo限制循环长度、限定开始位置
1.获取repeat循环结束: 自定义指令: .directive('repeatFinish', function () { return { link: function (scope, elem ...
随机推荐
- 后台获得集合,变成json字符串,放到EL表达式,js进行获取遍历
//把集合编程json字符串,放到el表达式 JSONArray array = new JSONArray(); JSONArray fromObject = array.fromObject(ar ...
- Asm.Def谈笑风生
★ 输入文件:asm_talk.in 输出文件:asm_talk.out简单对比时间限制:2 s 内存限制:256 MB [题目描述] “人呐都不知道,自己不可以预料,直升机刚一出圣地亚哥 ...
- 洛谷——P1720 月落乌啼算钱
题目背景 (本道题目木有以藏歌曲……不用猜了……) <爱与愁的故事第一弹·heartache>最终章. 吃完pizza,月落乌啼知道超出自己的预算了.为了不在爱与愁大神面前献丑,只好还是硬 ...
- 一篮子苹果,每天吃一半多一个吃,第十天吃一半多一个后就剩余一个,求一共多少个苹果,JAVA版
/** * @author xuzhu **/public class TestApple { public static void main(String[] args) { int days = ...
- - > 并查集+路径压缩(详解)(第一节)
先举一个友爱的例子解释一下并查集: 话说江湖上散落着各式各样的大侠,有上千个之多. 他们没有什么正当职业,整天背着剑在外面走来走去,碰到和自己不是一路人的,就免不了要打一架.但大侠们有一个优点就是讲义 ...
- 深度优先遍历DFS
深度优先遍历,这个跟树中的遍历类似,做深度遍历就是访问一个节点之后,在访问这个节点的子节点,依次下去是一个递归的过程. 具体代码: void DFS(MGraph g ,int i) { in ...
- 【转】 vsftp上传文件出现553 Could not create file解决方法
因工作需要,需要搭建一个ftp服务器,我使用ubuntu 10.04操作系统,下载vsftpdy源代码, 进行了编译,安装,然后按照INSTALL文件,创建了用户等操作. 因为时间比较紧,我采用 ...
- poj 3020 Antenna Placement(二分无向图 匈牙利)
Antenna Placement Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 6438 Accepted: 3176 ...
- 【转】Caused by: java.lang.NoClassDefFoundError: android.support.v7.gridlayout.R$dimen 异常解决方法
在使用gridlayout中遇到 Caused by: java.lang.NoClassDefFoundError: android.support.v7.gridlayout.R$dimen 问题 ...
- Silverlight访问数据库大全(转)
Silverlight访问数据库大全 Silverlight访问数据库大全 Posted on 2010-06-13 17:25 moss_tan_jun 阅读(1917) 评论(0) 编辑 收藏 最 ...