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 ...
随机推荐
- 生成Token字符串
生成比较短的Token字符串 有的时候,我们需要生成一些Token作为标识:如认证后的标识符,资源的提取码等.一个比较常见的算法是生成一个GUID来作为Token,由于GUID的随机性和唯一性特点,作 ...
- 从零深入 tomcat
1.tomcat的安装使用 tomcat是实现了J2EE标准的最简单轻巧的WEB服务器,所以使用tomcat必须安装JDK咯! ① 安装JDK并设置环境变量: ②设置tomcat的环境变量: 这两小步 ...
- new关键字的理解-问题型
//输出的结果是?????????//The answer is good and gbc public class Example { String str=new String("goo ...
- WINCE下进程间通信(一)
WINCE下进程间通信(一) 在WINCE开发中经常需要在不同的进程之间传递.共享数据,总结了一下,WINCE下进程间通信常用的方式有:Windows消息,共享内存,socket通信,管道,全局原子, ...
- IE6 7 父级元素的overflow:hidden 是包不住子级的relative
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- .OpenWrt驱动程序Makefile的分析概述 、驱动程序代码参考、以及测试程序代码参考
# # # include $(TOPDIR)/rules.mk //一般在 Makefile 的开头 include $(INCLUDE_DIR)/kernel.mk // 文件对于 软件包为内核时 ...
- jTDS Java连接SQL Server 2000数据库
Java连接SQL Server 2000数据库时,有两种方法: (1)通过Microsoft的JDBC驱动连接.此JDBC驱动共有三个文件,分别 是mssqlserver.jar.msutil.ja ...
- android KeyEvent for dot "."
android连接了4x4的物理按键,需要映射".". 在linux驱动层注册了按键KEY_DOT, 写android的app的时候却没有对应的宏KEYCODE_DOT.只有KEY ...
- jar2exe 配置jre
http://www.regexlab.com/zh/jar2exe/support.htm
- javascript高级程序设计 重读系列
1.基本概念.数据类型.函数 1.1 数据类型 ECMAScript中有5种简单数据类型:Undefind,Null,Boolean,Number,String 问题:判断变量是否是空值的代码 解析: ...