AngularJs ngInclude、ngTransclude

时间:2023-03-10 03:20:37
AngularJs 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" ng-controller="testCtrl as ctrl">
<input ng-model="ctrl.words" />
<my-div>{{ctrl.words}}</my-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() {
this.words = "Hello World";
};
}());

在指令中嵌入指令外的DOM元素,值的注意的是,就算这个指令创建了自己的子scope,这个DOM元素所在的scope也不是这个指令的scope,而是指令所在的scope。