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 ...
随机推荐
- 转 区别 getChildFragmentManager getSupportFragmentManager
The definition of getChildFragmentManager() is: Return a private FragmentManager for placing and man ...
- OpenGL学习-------点、直线、多边形
上一课中,我们学习了如何绘制几何图形,但大家如果多写几个程序,就会发现其实还是有些郁闷之处.例如:点太小,难以看清楚:直线也太细,不舒服:或者想画虚线,但不知道方法只能用许多短直线,甚至用点组合而成. ...
- 用css、html编写一个两列布局的网页,名称为css.html ,要求左侧宽度为200px ,右侧自动扩展
<body><div style=" float:left; width:200px; height:300px; border: 1px #0033FF solid;&q ...
- python之requests模块
1.安装 pip install requests 2.基本用法 就是以某种HTTP方法向远端服务器发送一个请求而已 import requests r = requests.get('https:/ ...
- 【poj解题】1028
stack的应用 #include<iostream> #include<stack> #include<stdio.h> #include<stdlib.h ...
- DML、DDL、DCL区别及介绍
DML(data manipulation language): 它们是SELECT.UPDATE.INSERT.DELETE,就象它的名字一样,这4条命令是用来对数据库里的数据进行操作 ...
- MOS管常识
http://anlx27.iteye.com/blog/1583089 学过模拟电路,但都忘得差不多了.重新学习MOS管相关知识,大多数是整理得来并非原创.如有错误还请多多指点! 先上一张图 一. ...
- The 2014 ACMICPC Asia Regional Beijing Online
[A]极角排序+树状数组 [B]计算几何,凸包(队友已出) [C]-_-///不懂 [D]数论,概率密度 [E]图的连通性+Floyed传递闭包+bitset [F]贪心 [G]签到题 [H]区间维护 ...
- javascript高级程序设计 重读系列
1.基本概念.数据类型.函数 1.1 数据类型 ECMAScript中有5种简单数据类型:Undefind,Null,Boolean,Number,String 问题:判断变量是否是空值的代码 解析: ...
- CentOS6.6部署OpenStack Havana(Nova-Network版)
CentOS6.4部署OpenStack Havana(Nova-Network版) 一 基本设备介绍 测试环境 CentOS6.4 x64 OpenStack 服务 介绍 计算 (Compute) ...