您的位置：首页 > Web前端 > AngularJS

angularjs指令：replace与transclude的区别

2017-02-23 15:13 309 查看
将视图模板（Template或TemplateUrl）替换到指定位置的视图（Restrict），

replace:自定义指令名称是否保留。

true：不保留指令名

false：保留指令名（默认）

Transclude：是否将原来视图的内容嵌入到视图模板（Template或TemplateUrl）中。

true：保留替换前的节点内容。

false：直接覆盖原有内容。

ng-tranclude决定了在什么地方放置嵌入部分。

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular.min.js"></script>
<script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular-route.min.js"></script>
</head>

<body>
<hello>
<br/>
<span>原始的内容，</span><br/>
<span>还会在这里。</span>
</hello>
<hello></hello>

<br>

<hello1>
<br/>
<span>原始的内容1，</span><br/>
<span>还会在这里1。</span>
</hello1>
<hello1></hello1>
<br>

<hello2>
<br/>
<span>原始的内容2，</span><br/>
<span>还会在这里2。</span>
</hello2>
<hello2></hello2>
<br>

<hello3>
<br/>
<span>原始的内容3，</span><br/>
<span>还会在这里3。</span>
</hello3>
<hello3></hello3>

<br>
<hello4>
<br/>
<span>原始的内容4，</span><br/>
<span>还会在这里4。</span>
</hello4>
<hello4></hello4>

<br>
<hello5>
<br/>
<span>原始的内容5，</span><br/>
<span>还会在这里5。</span>
</hello5>
<hello5></hello5>

<script>
var appModule = angular.module('app', []);
appModule
.directive('hello', function () {
return {
restrict: 'E',
template: '<div>Hi there :transclude: true<span ng-transclude></span></div>',
transclude: true
/*把<hello>标签替换成我们所编写的HTML模板，
但是<hello>标签内部的内容保持不变。*/
};
})
.directive('hello1', function () {
return {
restrict: 'E',
template: '<div>Hi there 1 :transclude: false<span ng-transclude></span></div>',
transclude: false
};
})
.directive('hello2', function () {
return {
restrict: 'E',
template: '<div>Hi there 2 :replace: true</div>',
replace: true/* 将视图模板template替换到指定位置hello2 */
};
})
.directive('hello3', function () {
return {
restrict: 'E',
template: '<div>Hi there 3 : replace: false</div>',
replace: false/*默认为 false*/
};
})
.directive('hello4', function () {
return {
restrict: 'E',
/*ng-tranclude决定了在什么地方放置嵌入部分。*/
template: '<div>Hi there 4 :replace: true,  transclude: true<span ng-transclude></span></div>',
replace: true, /*默认为 false*/
transclude: true
};
})
.directive('hello5', function () {
return {
restrict: 'E',
template: '<div>Hi there 5 :replace: false,  transclude: false<span ng-transclude></span></div>',
replace: false, /*默认为 false*/
transclude: false
};
});
</script>
</body>
</html>


显示结果：



分析：

审查元素：

对比replace为true、false的区别：



对比transclude为true、false的区别：



具体审查：

<body>
<hello><div>Hi there :transclude: true<span ng-transclude="">
<br class="ng-scope">
<span class="ng-scope">原始的内容，</span><br class="ng-scope">
<span class="ng-scope">还会在这里。</span>
</span></div></hello>
<hello><div>Hi there :transclude: true<span ng-transclude=""></span></div></hello>

<br>

<hello1><div>Hi there 1 :transclude: false<span ng-transclude=""></span></div></hello1>
<hello1><div>Hi there 1 :transclude: false<span ng-transclude=""></span></div></hello1>
<br>

<div>Hi there 2 :replace: true</div>
<div>Hi there 2 :replace: true</div>
<br>

<hello3><div>Hi there 3 : replace: false</div></hello3>
<hello3><div>Hi there 3 : replace: false</div></hello3>

<br>
<div>Hi there 4 :replace: true,  transclude: true<span ng-transclude="">
<br class="ng-scope">
<span class="ng-scope">原始的内容4，</span><br class="ng-scope">
<span class="ng-scope">还会在这里4。</span>
</span></div>
<div>Hi there 4 :replace: true,  transclude: true<span ng-transclude=""></span></div>

<br>
<hello5><div>Hi there 5 :replace: false,  transclude: false<span ng-transclude=""></span></div></hello5>
<hello5><div>Hi there 5 :replace: false,  transclude: false<span ng-transclude=""></span></div></hello5>

<script>
var appModule = angular.module('app', []);
appModule
.directive('hello', function () {
return {
restrict: 'E',
template: '<div>Hi there :transclude: true<span ng-transclude></span></div>',
transclude: true
/*把<hello>标签替换成我们所编写的HTML模板，但是<hello>标签内部的内容保持不变。*/
};
})
.directive('hello1', function () {
return {
restrict: 'E',
template: '<div>Hi there 1 :transclude: false<span ng-transclude></span></div>',
transclude: false
};
})
.directive('hello2', function () {
return {
restrict: 'E',
template: '<div>Hi there 2 :replace: true</div>',
replace: true/* 将视图模板template替换到指定位置hello2 */
};
})
.directive('hello3', function () {
return {
restrict: 'E',
template: '<div>Hi there 3 : replace: false</div>',
replace: false/*默认为 false*/
};
})
.directive('hello4', function () {
return {
restrict: 'E',
template: '<div>Hi there 4 :replace: true,  transclude: true<span ng-transclude></span></div>',
replace: true, /*默认为 false*/
transclude: true
};
})
.directive('hello5', function () {
return {
restrict: 'E',
template: '<div>Hi there 5 :replace: false,  transclude: false<span ng-transclude></span></div>',
replace: false, /*默认为 false*/
transclude: false
};
});
</script>

</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航