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的字段,这个字段的作用是用于指令之间的相互交流.举个简单的例子,假如我 ...
随机推荐
- 使用Highcharts实现柱状图展示
第一步 新建页面line.html,引入HighCharts核心js文件 <script type="text/javascript" src="../../js/ ...
- nignx部署django
操作系统:Linux wiki 2.6.32-131.0.15.el6.x86_64 nginx版本: nginx-1.5.7 uwsgi版本:uwsgi-2.0.8 大致流程参考:http://ww ...
- 反素数ant(数学题)
1053: [HAOI2007]反素数ant Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 2872 Solved: 1639[Submit][St ...
- jquery 访问后台方法 并且获取后方法返回的数据
说明: 1.开发环境 asp.net MVC4 c#语言. 后台方法位于控制器中ProController.cs中 后台方法如下: public string GetNumber() { string ...
- python基础-第五篇-5.2递归
又是一个阳光明媚的日子,小白看着刚刚从东边升起的太阳,感觉太阳爷爷也在向她打招呼,小白就不经的微笑起来!心想:今天又会学到什么有趣的东西呢?有些小期待,也有些小激动! 小刘来得比小白还早,两辆相视而笑 ...
- 使用asn1tools进行asn1编解码
最近在做3GPP的编解码,发现有两个第三方库比较好用.一个是ASN1C(c语言编译环境),一个是python第三方库asn1tools.这里介绍下asn1tools的使用方法: 1 第一步:生成asn ...
- ARDUINO W5100 WebClient 测试
基础工作:W5100扩展板插在ARDUINO上.用网线把W5100和自己家的路由器连接.插上网线能看到侧面网口指示灯变亮.路由器开启DHCP服务(一般都是开启的). 1.打开官方例程里面的Ethern ...
- mysql用户和权限管理(Linux系统下)
在mysql自带的库中有一个mysql,这个库包含了太多的东西,其中有一张表user,这张表存储了所有的用户信息. mysql> select user,host,password from u ...
- Jooq比较偏的用法
count public Integer count(Integer id) { return dslContext.selectCount().from(Tables.<table_name& ...
- 视图的创建与使用 Sql Server View
创建教材的三个数据表Student.Course及SC. create database S_T Use S_T CREATE TABLE Student (Sno CHAR(9), Sname CH ...