基本介绍

有了很多内置指令,但是依然无法满足我们的需要,我们可以自己定义一个指令,实现默写功能。

基本使用

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——自定义指令的更多相关文章

  1. Angular自定义指令(directive)

    angular自定义指令,意我们可以通过angula自己定义指令,来实现我们的特殊要求,为所欲为,一支穿云箭,千军万马来相见 多少年的老规矩了,先看代码: <!DOCTYPE html> ...

  2. angular 自定义指令详解 Directive

    在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足 ...

  3. angular 自定义指令 directive transclude 理解

    项目中断断续续的用了下angular,也没狠下心 认真的学习.angular 特别是自定义指令这块 空白. transclude 定义是否将当前元素的内容转移到模板中.看解释有点抽象. 看解释有点抽象 ...

  4. Angular自定义指令directive:scope属性

    在AngularJS中,除了内置指令如ng-click等,我们还可以自定义指令.自定义指令,是为了扩展DOM元素的功能.代码中,通过指定directive中的restrict属性,来决定这个指令是作为 ...

  5. Angular17 Angular自定义指令

    1 什么是HTML HTML文档就是一个纯文本文件,该文件包含了HTML元素.CSS样式以及JavaScript代码:HTML元素是由标签呈现,浏览器会为每个标签创建带有属性的DOM对象,浏览器通过渲 ...

  6. angular自定义指令

    1.在directive文件下创建指令的js文件 通常自定义指令需要声明模块(注意定义指令时, js内部指令名称需采用 aaAaBb驼峰的命名方式  html中使用的是aa-aa-bb) e.g (f ...

  7. angular -- 自定义指令和模板

    angular 可以自定义一些指令,来简化我们前端的工作量. 第一种:简单指令示例: <h3>自定义指令</h3> <sheng></sheng> &l ...

  8. angular自定义指令命名的那个坑

    Directive 先从定义一个简单的指令开始. 定义一个指令本质上是在HTML中通过元素.属性.类或注释来添加功能.AngularJS的内置指令都是以ng开头,如果想自定义指令,建议自定义一个前缀代 ...

  9. angular自定义指令相关知识及代码

    原文地址 https://www.jianshu.com/p/0c015862156d 大纲 1.自定义指令之——属性指令 2.自定义属性指令的运行原理 3.自定义属性指令代码实践 4.自定义结构指令 ...

  10. angular自定义指令 repeat 循环结束事件;limitTo限制循环长度、限定开始位置

    1.获取repeat循环结束: 自定义指令: .directive('repeatFinish', function () { return { link: function (scope, elem ...

随机推荐

  1. C#: 旋转图片到正确位置

    当从iPhone等手机上传图片到服务器后,通常需要进行旋转处理,否则在进行图片压缩.缩放处理后会丢失正确的位置信息,导致显示的图片不处于正确的位置上. 处理的做法就是读取照片的Exif信息,并旋转到正 ...

  2. 【转】gcov lcov 覆盖c/c++项目入门

    原文: http://www.cnblogs.com/turtle-fly/archive/2013/01/09/2851474.html ------------------------------ ...

  3. 1.3-动态路由协议EIGRP

    EIGRP(Enhanced IGRP) EIGRP的特点: IGRP/EIGRP都是CISCO的私有协议. 1:是唯一的一种LS/DV的混合协议. 2:Rapid convergence EIGRP ...

  4. uva 11212 - Editing a Book(迭代加深搜索 IDA*) 迭代加深搜索

    迭代加深搜索 自己看的时候第一遍更本就看不懂..是非常水,但智商捉急也是没有办法的事情. 好在有几个同学已经是做过了这道题而且对迭代加深搜索的思路有了一定的了解,所以在某些不理解的地方询问了一下他们的 ...

  5. 每日一支TED——弗兰斯&#183;兰庭:为动物发声的摄影作品——2015年6月3日

    今天是听TED的第11天,从今天開始简单写一下听TED的感受! 刚把得! 弗兰斯·兰庭从一个部落得到一个思想说:全部的动物都是一样的.虽然他们的外形不一样.可是内在确实一样的,他们在外面伪装,可是他们 ...

  6. cocos2d-x 执行在 genymotion上面

    1.jni/Application.mk加入红色圆圈内的參数 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWl6aXhpYW5zaGVuZw==/fon ...

  7. HDU 5862Counting Intersections

    Counting Intersections Time Limit: 12000/6000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/ ...

  8. Android EditText默认不获取焦点

    1.当页面中有多个EditText时,第一个EditText会自动获取焦点,取消的办法: 在EditText的父View中调用: android:focusable="true"  ...

  9. tiny4412 裸机程序 六、重定位代码到IRAM+0x8000【转】

    本文转载自:http://blog.csdn.net/eshing/article/details/37115697 一.重定向 对于程序而言,我们需要理解两个概念,一是程序当前所处的地址,即程序在运 ...

  10. bzoj2844

    http://www.lydsy.com/JudgeOnline/problem.php?id=2844 线性基... 先把线性基搞出来,然后不断逼近答案,如果这个基比答案小了,那么说明要加上,同时加 ...