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的字段,这个字段的作用是用于指令之间的相互交流.举个简单的例子,假如我 ...
随机推荐
- java工程中当前目录在html中的设置
本地启动server的时候总是去读"/"的, 但到了服务器上,如果当前目录是服务器根目录下的一个文件夹,就应该设: <head> <meta charset=&q ...
- 驱动程序分层分离概念_总线驱动设备模型_P
分层概念: 驱动程序向上注册的原理: 比如:输入子程序一个input.c作为一层,下层为Dev.c和Dir.c,分别编写Dev.c和Dir.c向上Input.c注册:如图所示 分离概念: 分离概念主要 ...
- 【BZOJ3779】重组病毒 LCT+DFS序
[BZOJ3779]重组病毒 Description 黑客们通过对已有的病毒反编译,将许多不同的病毒重组,并重新编译出了新型的重组病毒.这种病毒的繁殖和变异能力极强.为了阻止这种病毒传播,某安全机构策 ...
- 6.2-SingletonBeanRegistry-DefaultSingletonBeanRegistry
SingletonBeanRegistry package org.springframework.beans.factory.config; public interface SingletonBe ...
- mybatis generator的用法
1 自动生成代码 配置数据库 自动生成三个文件: 第一,java bean文件: 第二,java bean对应的dao文件,但是这里的dao只是一个接口: 第三,mybatis需要的Mapper文件: ...
- 洛谷 4035 [JSOI2008]球形空间产生器
题目戳这里 一句话题意 给你 n+1 个 n 维点,需要你求出这个n维球的球心.(n<=10) Solution 这个题目N维的话确实不好想,反正三维就已经把我搞懵了,所以只好拿二维类比. 首先 ...
- Jquery实现loading效果
需要引入jquery和bootstrap相关包,然后把下面的代码复制进去就可以了: <div class="modal fade" id="loadingModal ...
- python+NLTK 自然语言学习处理四:获取文本语料和词汇资源
在前面我们通过from nltk.book import *的方式获取了一些预定义的文本.本章将讨论各种文本语料库 1 古腾堡语料库 古腾堡是一个大型的电子图书在线网站,网址是http://www.g ...
- 聊聊数据库~5.SQL运维上篇
1.6.SQL运维篇 运维这块逆天只能说够用,并不能说擅长,所以这篇就当抛砖之用,欢迎补充和纠错 PS:再说明下CentOS优化策略这部分的内容来源:首先这块逆天不是很擅长,所以主要是参考网上的DBA ...
- Gradle-jar-aar
Ref:Android Studio系列教程 Ref:Android Studio系列教程四--Gradle基础 Ref:Intellij IDEA 14.x 中的Facets和Artifacts的区 ...