AngularJS-指令command
directive:
匹配模式restrict:'AEMC'默认为A
template
templateUrl
templateCache:把模板缓存起来,共多个指令使用
- var myModule = angular.module("MyModule", []);
- //注射器加载完所有模块时,此方法执行一次
- myModule.run(function($templateCache){
- $templateCache.put("hello.html","<div>Hello everyone!!!!!!</div>");
- });
- myModule.directive("hello", function($templateCache) {
- return {
- restrict: 'AECM',
- template: $templateCache.get("hello.html"),
- replace: true
- }
- });
replace:
transclude:指令互相嵌套
独立scope
scope:{}
- var myModule = angular.module("MyModule", []);
- myModule.directive("hello", function() {
- return {
- restrict: 'AE',
- scope:{},
- template: '<div><input type="text" ng-model="userName"/>{{userName}}</div>',
- replace: true
- }
- });
绑定策略
内置指令63:
compile&&link:
加载angular.js,找到ng-app指令,确定应用边界
遍历DOM,找到所有指令
根据指令代码的template,replace,transclue转换DOM结构
连接阶段
对每一条指令运行link函数
link函数一般用来操作DOM、绑定事件监听器。
AngularJS-指令command的更多相关文章
- AngularJS指令
1. AngularJS指令的特点: AngularJS通过被称为指令的新属性来扩展HTML,指令的前缀为ng-. AngularJS通过内置的指令来为应用添加功能. AngularJS允许你自定义指 ...
- angularjs指令参数transclude
angularjs指令参数transclude transclude翻译为嵌入,和之前看到的vue中的slots作用差不多,目的是将指令元素的子内容嵌入到指令的模板中 定义指令 <div sid ...
- angularjs 指令—— 绑定策略(@、=、&)
angularjs 指令—— 绑定策略(@.=.&) 引入主题背景:angular 的指令配置中的template可以直接使用硬编码写相应的代码,不过也可以根据变量,进行动态更新.那么需要用到 ...
- AngularJS 指令
AngularJS 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. ng-app 指令 ng-app 指令定义了 AngularJS 应用程序的 根元素. ng-app 指 ...
- angularjs指令(二)
最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方. Angularjs指令定义的API AngularJs的指令定义大致如下 angula ...
- angularJs指令执行的机制==大概的三个阶段
第一阶段:加载阶段 angularJs要运行的话,需要去等待angular.js加载完成,加载完之后呢,angular就会去查找到ng-app这个指令,ng-app在每个应用里面只能出现一次, 它也就 ...
- AngularJS学习笔记二:AngularJS指令
AngularJS 指令: AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用 指令: ng-app 指令 ...
- AngularJs指令(一)
AngularJs应用现在越来越流行了,谷歌都与微软合作支持AngularJS2.0,这是要逆天了,说明AngularJs将来大势所趋.最近想跳槽,又重新拾起了AngluarJs(之前由于缺少项目应用 ...
- 【转】angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在 ...
- AngularJS指令进阶 – ngModelController详解
AngularJS指令进阶 – ngModelController详解 在自定义Angular指令时,其中有一个叫做require的字段,这个字段的作用是用于指令之间的相互交流.举个简单的例子,假如我 ...
随机推荐
- 【SQLServer2008】之如何导入mdf,ldf文件、导入.mdf文件报错解决问题以及如何获得Authenticated Users 权限
一.如何导入mdf,ldf文件: 链接:http://jingyan.baidu.com/article/09ea3ede21258cc0afde3943.html 二.导入.mdf文件报错解决问题 ...
- Elasticsearch5.3 学习(一):安装、Yii2.0 下载es扩展
Elasticsearch是一个基于Lucene,提供了一个分布式多用户能力的全文搜索引擎.其他就不多说了,官方文档有详细的介绍. 我自己是在CentOS 7.0安装的 Elasticsearch 是 ...
- ubuntu study
1.statement a.Fist af all,I think myself be to study miv in instruction. b.again,I think myself be t ...
- Oracle11g完全卸载方法
一.在oracle11G以前卸载oracle会存在卸载不干净,导致再次安装失败的情况,在运行services.msc打开服务,停止Oracle的所有服务. 二. oracle11G自带一个卸载批处理\ ...
- SDOI2012 Round1 day2 集合(set)解题报告
//=====================以上为官方题解==============// 数据略水,暴力枚举50. 把边按照升序排一遍,在询问,水过. #include<cstdio> ...
- poj2421
Constructing Roads Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 22048 Accepted: 93 ...
- 使用ILookup<TKey, TElement> 接口查找集合
public class Program { public static void Main() { // 创建一个放入ilookup数据结构的School清单. List<School> ...
- Image Recognition
https://www.tensorflow.org/tutorials/image_recognition
- PAT 1054. 求平均值 (20)
本题的基本要求非常简单:给定N个实数,计算它们的平均值.但复杂的是有些输入数据可能是非法的.一个“合法”的输入是[-1000,1000]区间内的实数,并且最多精确到小数点后2位.当你计算平均值的时候, ...
- sql 2008数据事务日志已满处理方法
突然发现sql 2008出现错误:数据库 'mybase_db' 的事务日志已满.若要查明无法重用日志中的空间的原因,请参阅 sys.databases 中的 log_reuse_wait_desc ...