angularjs指令：replace与transclude的区别

本文主要是介绍angularjs指令：replace与transclude的区别，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

将视图模板（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>

显示结果：

Markdown

分析：

审查元素：

对比replace为true、false的区别：
Markdown

对比transclude为true、false的区别：
Markdown

具体审查：

<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>