Angular - - ngInclude、ngTransclude
这两个都是HTML DOM嵌入指令
ngInclude
读取,编译和插入外部的HTML片段。
格式:ng-include=“value”<ng-include src=”value” onload=“ex”autoscroll=“str”></ng-include> class=”ng-include:value”
value:string类型 模板id或者模板url
ex:表达式,载入的时候执行。
autoscroll:页面载入后,当ngInclude需要调用$anchorScroll移动到指定位置的时候使用。
使用代码:
<div ng-include="'temp'" onload="value='5'" autoscroll="" ></div>
<script type="text/ng-template" id="temp">
<input ng-model="text" />{{value}}
</script>
这里需要注意的是 <script>标签的type是ng格式的 type="text/ng-template",还需要注意一个坑,需要把<script>标签写在ng-app的范围内才能让 angular顺利的将该模板存入模板缓存中,如果是在ng-app范围外,将会是undefined。
ngTransclude
这个指令用于标记使用嵌入式的指令中包含的DOM插入点。
格式:ng-transclude
使用代码:
<div ng-app="Demo">
<div ng-controller="testCtrl as ctrl">
<input ng-model="ctrl.words" />
<my-div>{{ctrl.words}}</my-div>
</div>
</div>

(function () {
angular.module("Demo", [])
.directive("myDiv", myDiv)
.controller("testCtrl", testCtrl);
function myDiv(){
return {
restrict: 'E',
transclude: true,
template:"<div><p>ngTransclude:</p><p ng-transclude></p><p>End</p></div>"
}
};
function testCtrl() {
var vm = this;
vm.words = "Hello World";
};
}());

在指令中嵌入指令外的DOM元素,值的注意的是,就算这个指令创建了自己的子scope,这个DOM元素所在的scope也不是这个指令的scope,而是指令所在的scope。
Angular - - ngInclude、ngTransclude的更多相关文章
- AngularJs ngInclude、ngTransclude
这两个都是HTML DOM嵌入指令 ngInclude 读取,编译和插入外部的HTML片段. 格式:ng-include=“value”<ng-include src=”value” onloa ...
- 前端MVC学习总结(一)——MVC概要与angular概要、模板与数据绑定
一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...
- 前端MVC学习笔记(一)——MVC概要与angular概要、模板与数据绑定
一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...
- Angular ng-include 学习实例
ng-include 可以引入外部的文件到当前视图中.这样可以增强复用性. 最简单的用法 <div ng-include src="'/public/template/tpl.htm ...
- 1.MVC概要与angular概要、模板与数据绑定
转自:https://www.cnblogs.com/best/p/6242011.html#_label3_0_8_2 一.前端MVC概要 1.1.库与框架的区别 1.2.AMD与CMD 1.2.前 ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- AngularJs angular.forEach、angular.extend
angular.forEach 调用迭代器函数取每一项目标的集合,它可以是一个对象或数组.迭代器函数与迭代器(value.key)一起调用,其中值是一个对象属性或数组元素的值,而数组元素是对象属性的关 ...
- angular 指令@、=、&的用法和区别
1.指令作用域中的@ 作用是把当前属性作为字符串传递. html: <div ng-controller="MyCtrl"> <drink water=" ...
- Angular - - ngCloak、ngController、ngInit、ngModel
ngCloak ngCloak指令是为了防止Angular应用在启动加载的时候html模板将会被短暂性的展示.这个指令可以用来避免由HTML模板显示造成不良的闪烁效果. 格式: ng-cloak ...
随机推荐
- Envelope几何对象 Curve对象几何对象 Multipatch几何对象 Geometry集合接口 IGeometryCollection接口
Envelope是所有几何对象的外接矩形,用于表示几何对象的最小边框,所有的几何对象都有一个Envelope对象,IEnvelope是Envelope对象的主要接口,通过它可以获取几何对象的XMax, ...
- Phaser小游戏
本来今天打算阅读AngularJs源代码的,但是上头下来了任务,做个小霸王上面的那种接金蛋的游戏,想象最近系统的学习了一下gulp和之前熟悉了一遍的Phaser,于是就打算用这两个东西一起来做个dem ...
- Material Design设计的开源代码
https://github.com/telly/FloatingAction http://www.csdn.net/article/2014-11-21/2822753-material-desi ...
- HDU 3201 Build a Fence
水题 #include<cstdio> #include<cstring> #include<cmath> #include<algorithm> us ...
- c# 动态产生控件 注册动态控件事件
用CheckEdit演示 其他控件类推 CheckEdit AllSele = new CheckEdit(); AllSele.Location = new System.Drawing.Point ...
- 如何创建一个要素数据类 IField,IFieldEdit,IFields,IFieldsEditI,GeometryDef,IGeometryDefEdit接口
如何创建一个要素数据类 创建要素类用到了IFeatureWorkspace.CreateFeatureClass方法,在这个方法中有众多的参数,为了满足这些参数,我们要学习和了解下面的接口. IFie ...
- CodeForces 609B The Best Gift
统计+枚举 #include<cstdio> #include<cmath> #include<cstring> #include<algorithm> ...
- (转)java 从jar包中读取资源文件
(转)java 从jar包中读取资源文件 博客分类: java 源自:http://blog.csdn.net/b_h_l/article/details/7767829 在代码中读取一些资源文件 ...
- Apache和Nginx的对比
Apache与Nginx的优缺点比较 1.nginx相对于apache的优点: 轻量级,同样起web 服务,比apache 占用更少的内存及资源 抗并发,nginx 处理请求是异步非阻塞的,而apac ...
- <Natural Language Processing with Python>学习笔记一
Spoken input (top left) is analyzed, words are recognized, sentences are parsed and interpreted in c ...