angular.js指令中transclude选项及ng-transclude指令详解

2024-03-08 22:21:40

前言

在开始本文之前，首先要说明我们使用的angular的版本是1.5.0，因为不同版本的表现结果不是那么相同。

首先我们应该了解到，在angular指令的选项中，有一项是transclude，这个选项有三种值：false，true，object；那这三种值分别表示什么，该如何选择？

下面我们来详细的说明一下。

transclude字面意思就是嵌入，也就是说你需不需要将你的指令内部的元素（注意不是指令的模板）嵌入到你的模板中去，默认是false。如果你需要这种功能的话，那么就需要将transclude设置为true或者{...}。如果将这个值设置为true或者{...}的话，那么就要配合angular的ng-transclude指令来进行使用，好，废话不多说了，看代码是最好的学习方法，我们下面就来根据代码来了解掌握这些东西。

代码的结果可以在这里看到，完整的代码会在后面贴出来。

现在我们来看第一个指令部分

1、在页面中使用的形式

<!-- 指令one-transclude 内部含有元素-->
<one-transclude class="one-transclude-self">
 <div class="one-transclude-self__footer">$AAAAAA $我是指令[one-transclude]元素内部的内容</div>
</one-transclude>

我们定义了一个名字叫做one-transclude的指令，也就是说这个指令的模板中只有一个嵌入点的，指令内部是有一些元素的我给内部的元素的内容做了一些标记，方便我们后面观察。

2、JavaScript代码部分

angular.module('app', [])
 .directive('oneTransclude', oneTransclude);

function oneTransclude() {
 return {
 restrict: 'AE',
 transclude: true,
 templateUrl: 'one-transclude.html'
 };
}

我们在JavaScript中定义oneTransclude，注意我们这里transclude=true，表明我们希望在模板中将指令的内部元素嵌入到模板中的某个位置。

3、指令的模板部分

<div class="one-transclude">
 <div class="one-transclude__title">
 $BBBBBB$ 我是指令[one-transclude]模板的内容
 </div>
 <hr>
 <ng-transclude>
 $CCCCCC$ 我是指令[one-transclude]模板中[ng-transclude]中的内容
 </ng-transclude>
</div>

上面书写了我们的指令模板，可以看到我们的模板由两部分组成，一部分是含有ng-transclude指令的，一部分是不含有这个指令的。当然我也把这些里面的内容作了一些标记，方便后面我们观察。因为这里的ng-transclude后面不带有参数，所以指令里面的元素就是那些以$AAAAAA$开头的整块元素都会嵌入到指令模板中含有ng-transclude指令的内部，还要注意，如果指令模板中含有ng-transclude指令的元素内部也有元素的话，那么这些元素会被替代。还有一种情况，那就是如果指令里面不含有元素，那么指令模板里面的含有ng-transclude指令的元素的内部元素会显示出来

4、我们可以看下图更直观的了解一下。

多个嵌入点的情况，这时候指令内部的ng-transclude的值是一个对象，一种映射关系；具体的可以看下面的代码：

5、指令在页面中使用的代码：

<!-- 指令mutil-transclude -->
<multi-transclude>
 <multi-transclude-title>我是指令元素内部的title</multi-transclude-title>
 <multi-transclude-body>我是指令元素内部的body</multi-transclude-body>
 <multi-transclude-footer>我是指令元素内部的footer</multi-transclude-footer>
</multi-transclude>

我们在页面中使用了multi-transclude这个指令，在指令的内部还有三个指令，这内部的三个指令要以E的形式应用，不然会出现问题，看到这里不明白的没关系，继续往下看。

6、JavaScript代码中的指令：

angular.module('app', [])
 .directive('multiTransclude', multiTransclude);

function multiTransclude() {
 return {
 restrict: 'AE',
 transclude: {
  'title': 'multiTranscludeTitle',
  'body': 'multiTranscludeBody',
  'footer': '?multiTranscludeFooter'
 },
 templateUrl: 'multi-transclude.html'
 };
}

我们的transclude对象定义了如何将多个嵌入点与指令内部的指令嵌入点一一对应，拿'footer': '?multiTranscludeFooter'来解释一下，footer对应指令模板中的一个嵌入点，multiTranscludeFooter对应指令元素内部的哪个multi-transclude-footer指令，前面的?表示这个嵌入点不一定有对应的指令存在。当然multiTranscludeFooter是我们自己定义的，可以随意定义，但是尽量做到让大家一看就知道是对应哪个嵌入点就行。

7、指令对应的模板

<div class="multi-transclude">
 <div class="multi-transclude__title" ng-transclude="title"></div>
 <div>忽略我,我就是证明我是在模板中的1</div>
 <div class="multi-transclude__body" ng-transclude="body"></div>
 <div>忽略我,我就是证明我是在模板中的2</div>
 <div class="multi-transclude__footer" ng-transclude="footer"></div>
</div>

从上面的模板中我们可以看到，指令ng-transclude后面的字符串就是我们定义的嵌入点，也就是上面指令定义时候用到的那些字符串。

到这里关于ng-transclude以及angular指令的transclude选项我想大家应该都明白了。

完整的代码部分

1、index.html

<body ng-controller="MyController as vm">

<h1 ng-bind="vm.title"></h1>

<h2>指令one-transclude 内部含有元素</h2>
<!-- 指令one-transclude 内部含有元素-->
<one-transclude class="one-transclude-self">
 <div class="one-transclude-self__footer">$AAAAAA $我是指令[one-transclude]元素内部的内容</div>
</one-transclude>

<h2>指令one-transclude 内部不含有元素</h2>
<!-- 指令one-transclude 内部不含有元素 -->
<one-transclude class="one-transclude-self"></one-transclude>

<h2>指令mutil-transclude</h2>
<!-- 指令mutil-transclude -->
<multi-transclude>
 <multi-transclude-title>我是指令元素内部的title</multi-transclude-title>
 <multi-transclude-body>我是指令元素内部的body</multi-transclude-body>
 <multi-transclude-footer>我是指令元素内部的footer</multi-transclude-footer>
</multi-transclude>

</body>

2、app.js

(function() {
angular.module('app', [])
 .controller('MyController', myController)
 .directive('oneTransclude', oneTransclude)
 .directive('multiTransclude', multiTransclude);

myController.$inject = [];

function myController() {
 var vm = this;
 vm.title = 'ng-transclude';
}

function oneTransclude() {
 return {
 restrict: 'AE',
 transclude: true,
 templateUrl: 'one-transclude.html'
 };
}

function multiTransclude() {
 return {
 restrict: 'AE',
 transclude: {
  'title': 'multiTranscludeTitle',
  'body': 'multiTranscludeBody',
  'footer': '?multiTranscludeFooter'
 },
 templateUrl: 'multi-transclude.html'
 };
}
})();

3、one-transclude.html

<div class="one-transclude">
 <div class="one-transclude__title">
 $BBBBBB$ 我是指令[one-transclude]模板的内容
 </div>
 <hr>
 <ng-transclude>
 $CCCCCC$ 我是指令[one-transclude]模板中[ng-transclude]中的内容
 </ng-transclude>
</div>

4、multi-transclude.html

<div class="multi-transclude">
 <div class="multi-transclude__title" ng-transclude="title"></div>
 <div>忽略我,我就是证明我是在模板中的1</div>
 <div class="multi-transclude__body" ng-transclude="body"></div>
 <div>忽略我,我就是证明我是在模板中的2</div>
 <div class="multi-transclude__footer" ng-transclude="footer"></div>
</div>

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

AngularJS中transclude用法详解

本文实例讲述了AngularJS中transclude用法.分享给大家供大家参考,具体如下: Transclude - 在Angular的指令中,大家会看到有一个这样的一个配置属性,这个单词在英文字典里面也查询不到真实的意思,所以就用英文来标示它吧.如果你深入的使用angular的话,你就花很大一部分时间来创建自定义指令,那么就不可避免的要深入理解transclude.简单的讲,transclude主要完成以下工作,取出自定义指令中的内容(就是写在指令里面的子元素),以正确的作用域解析它,然后再
JS前端中的设计模式和使用场景示例详解

目录引言策略模式 1.绩效考核 2.表单验证策略模式的优缺点: 代理模式 1.图片懒加载: 2.缓存代理总结引言相信大家在日常学习和工作中都多多少少听说/了解/使用过设计模式,我们都知道,使用恰当的设计模式可以优化我们的代码,那你是否知道对于前端开发哪些设计模式是日常工作经常用到或者必须掌握的呢?本文我将带大家一起学习下前端常见的设计模式以及它们的使用场景!!! 本文主讲: 策略模式代理模式适合人群: 前端人员设计模式小白/想知道如何在项目中使用设计模式策略模式策略
Angular中$cacheFactory的作用和用法实例详解

先说下缓存: 一个缓存就是一个组件,它可以透明地储存数据,以便以后可以更快地服务于请求.多次重复地获取资源可能会导致数据重复,消耗时间.因此缓存适用于变化性不大的一些数据,缓存能够服务的请求越多,整体系统性能就能提升越多. $cacheFactory介绍: $cacheFactory是一个为Angular服务生产缓存对象的服务.要创建一个缓存对象,可以使用$cacheFactory通过一个ID和capacity.其中,ID是一个缓存对象的名称,capacity则是描述缓存键值对的最大数量. 1.
Vue 中指令v-bind动态绑定及与v-for结合使用详解

目录前言: 一. v-bind动态绑定class 1. v-bind动态绑定class(对象语法) 2. v-bind动态绑定class(数组用法) 3.v-bind动态绑定style(对象语法) 4.v-bind动态绑定style(数组语法) 二.v-bind和v-for的结合使用前言: 在昨天的文章中已经基本介绍了,v-bind的基本使用,可以参考学习,本文是更加具体的解释v-bind的使用,和v-for结合的使用. 一. v-bind动态绑定class 1. v-bind动态绑定cla
js中的关联数组与普通数组详解

var privArr = []; privArr['staProjQueryGrid'] = [{ btn_id : 'but_add', roles : ['2001','2005'] }] console.log(privArr,privArr.staProjQueryGrid[0].btn_id) 第一行是定义一个数组priArr,第二行是给这个数组添加一个属性staProjQueryGird,这个属性值是一个数组.打印结果是 but_add var unPrivArr = [];//
JS中正则表达式全局匹配模式 /g用法详解

本文章来详细介绍js中正则表达式的全局匹配模式 /g用法,代码如下: var str = "123#abc"; var re = /abc/ig; console.log(re.test(str)); //输出ture console.log(re.test(str)); //输出false console.log(re.test(str)); //输出ture console.log(re.test(str)); //输出false 在创建正则表达式对象时如果使用了"g&q
js基础之DOM中document对象的常用属性方法详解

-----引入每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1 document.anchors 返回对文档中所有 Anchor 对象的引用.还有document.links/document.forms/document.images等 2 document.URL 返回当前文档的url 3 document.title 返回当前文档的标题 4 do
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解

这两个属性都是Object.prototype所提供:Object.prototype.hasOwnProperty()和Object.prototype.isPropertyOf() 先讲解hasOwnProperty()方法和使用.在讲解isPropertyOf()方法和使用看懂这些至少要懂原型链一.Object.prototype.hasOwnProperty() 概述 hasOwnProperty()方法用来判断某个对象是否含有指定的自身属性语法 obj.hasOwnPropert
JS中对象与字符串的互相转换详解

在使用 JSON2.JS 文件的 JSON.parse(data) 方法时候,碰到了问题: throw new SyntaxError('JSON.parse'); 查询资料,大概意思如下: JSON.parse方法在遇到不可解析的字符串时,会抛出SyntaxError异常. 即:JSON.parse(text, reviver),This method parses a JSON text to produce an object or array. t can throw a SyntaxE
基于js中style.width与offsetWidth的区别(详解)

作为一个初学者,经常会遇到在获取某一元素的宽度(高度.top值...)时,到底是用 style.width还是offsetWidth的疑惑. 1. 当样式写在行内的时候,如 <div id="box" style="width:100px">时,用 style.width或者offsetWidth都可以获取元素的宽度. 但是,当样式写在样式表中时,如 #box{ width: 100px; }, 此时只能用offsetWidth来获取元素的宽度,而sty
基于vue.js中事件修饰符.self的用法(详解)

.self可以理解为跳过冒泡事件和捕获事件,只有直接作用在该元素上的事件才可以执行. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>self</title> <script src="vue.js"></script> <!--'''''''

angular.js指令中transclude选项及ng-transclude指令详解

相关推荐

随机推荐