angularjs指令:replace与transclude的区别

2023-12-23 05:58

本文主要是介绍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>

这篇关于angularjs指令:replace与transclude的区别的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/526959

相关文章

Android学习总结之Java和kotlin区别超详细分析

《Android学习总结之Java和kotlin区别超详细分析》Java和Kotlin都是用于Android开发的编程语言,它们各自具有独特的特点和优势,:本文主要介绍Android学习总结之Ja... 目录一、空安全机制真题 1:Kotlin 如何解决 Java 的 NullPointerExceptio

Linux中的more 和 less区别对比分析

《Linux中的more和less区别对比分析》在Linux/Unix系统中,more和less都是用于分页查看文本文件的命令,但less是more的增强版,功能更强大,:本文主要介绍Linu... 目录1. 基础功能对比2. 常用操作对比less 的操作3. 实际使用示例4. 为什么推荐 less?5.

Java 关键字transient与注解@Transient的区别用途解析

《Java关键字transient与注解@Transient的区别用途解析》在Java中,transient是一个关键字,用于声明一个字段不会被序列化,这篇文章给大家介绍了Java关键字transi... 在Java中,transient 是一个关键字,用于声明一个字段不会被序列化。当一个对象被序列化时,被

解读@ConfigurationProperties和@value的区别

《解读@ConfigurationProperties和@value的区别》:本文主要介绍@ConfigurationProperties和@value的区别及说明,具有很好的参考价值,希望对大家... 目录1. 功能对比2. 使用场景对比@ConfigurationProperties@Value3. 核

Spring Boot拦截器Interceptor与过滤器Filter深度解析(区别、实现与实战指南)

《SpringBoot拦截器Interceptor与过滤器Filter深度解析(区别、实现与实战指南)》:本文主要介绍SpringBoot拦截器Interceptor与过滤器Filter深度解析... 目录Spring Boot拦截器(Interceptor)与过滤器(Filter)深度解析:区别、实现与实

关于Mybatis和JDBC的使用及区别

《关于Mybatis和JDBC的使用及区别》:本文主要介绍关于Mybatis和JDBC的使用及区别,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、JDBC1.1、流程1.2、优缺点2、MyBATis2.1、执行流程2.2、使用2.3、实现方式1、XML配置文件

exfat和ntfs哪个好? U盘格式化选择NTFS与exFAT的详细区别对比

《exfat和ntfs哪个好?U盘格式化选择NTFS与exFAT的详细区别对比》exFAT和NTFS是两种常见的文件系统,它们各自具有独特的优势和适用场景,以下是关于exFAT和NTFS的详细对比... 无论你是刚入手了内置 SSD 还是便携式移动硬盘或 U 盘,都需要先将它格式化成电脑或设备能够识别的「文

什么是ReFS 文件系统? ntfs和refs的优缺点区别介绍

《什么是ReFS文件系统?ntfs和refs的优缺点区别介绍》最近有用户在Win11Insider的安装界面中发现,可以使用ReFS来格式化硬盘,这是不是意味着,ReFS有望在未来成为W... 数十年以来,Windows 系统一直将 NTFS 作为「内置硬盘」的默认文件系统。不过近些年来,微软还在研发一款名

go 指针接收者和值接收者的区别小结

《go指针接收者和值接收者的区别小结》在Go语言中,值接收者和指针接收者是方法定义中的两种接收者类型,本文主要介绍了go指针接收者和值接收者的区别小结,文中通过示例代码介绍的非常详细,需要的朋友们下... 目录go 指针接收者和值接收者的区别易错点辨析go 指针接收者和值接收者的区别指针接收者和值接收者的

售价599元起! 华为路由器X1/Pro发布 配置与区别一览

《售价599元起!华为路由器X1/Pro发布配置与区别一览》华为路由器X1/Pro发布,有朋友留言问华为路由X1和X1Pro怎么选择,关于这个问题,本期图文将对这二款路由器做了期参数对比,大家看... 华为路由 X1 系列已经正式发布并开启预售,将在 4 月 25 日 10:08 正式开售,两款产品分别为华