Angular - - ngInclude、ngTransclude
2015-12-17 14:13
633 查看
这两个都是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移动到指定位置的时候使用。
使用代码:
这里需要注意的是 <script>标签的type是ng格式的 type="text/ng-template",还需要注意一个坑,需要把<script>标签写在ng-app的范围内才能让 angular顺利的将该模板存入模板缓存中,如果是在ng-app范围外,将会是undefined。
ngTransclude
这个指令用于标记使用嵌入式的指令中包含的DOM插入点。
格式:ng-transclude
使用代码:
在指令中嵌入指令外的DOM元素,值的注意的是,就算这个指令创建了自己的子scope,这个DOM元素所在的scope也不是这个指令的scope,而是指令所在的scope。
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 - - ngIf、ngSwitch、ngHide/ngShow
- Angular - - ngReadonly、ngSelected、ngDisabled
- Angular - -ngKeydown/ngKeypress/ngKeyup 键盘事件和鼠标事件
- Angular - - ngCsp、ngFocus、ngBlur、ngForm
- Angular - - ngCloak、ngController、ngInit、ngModel
- Angular - - ngClass、ngClassEven、ngClassOdd、ngStyle
- Angular - - ngChange、ngChecked、ngClick、ngDblclick
- Grunt搭建AngularJS项目
- Angularjs Controller间通信的几种方法
- Angular - - angular.injector、angular.module
- Angular - - Angular数据类型判断
- Angular - - angular.element
- Angular 框架将进入 2.0 时代
- Angular - - angular.equals
- Angular - - angular.forEach、angular.extend
- angularjs+requirejs按需加载
- Angular - - $anchorScroll、$controller、$document
- Angular - - $interval 和 $timeout
- Angular - - $animate
- Angular - - $interpolate 和 $parse