angularjs中的transclude参数的理解($tranclude服务以及compile中transclude)

最新推荐文章于 2021-03-03 21:36:35 发布
最新推荐文章于 2021-03-03 21:36:35 发布
阅读量4.7k 收藏 2
点赞数 1
分类专栏： angularJS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liangklfang/article/details/51177370
版权

首先我们来和replace进行一个对比：

<!doctype html>
<html ng-app="MyModule">
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<hello>
			<div>这里是指令内部的内容。</div>
		</hello>
	</body>
	<script src="framework/angular-1.3.0.14/angular.js"></script>
	<script src="replace.js"></script>
</html>
我们看看replace中的代码： 

var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
    return {
    	restrict:"AE",
    	template:"<div>Hello everyone!</div>",
    	replace:true
    } 
});
这时候我们很清楚的看到下面的DOM结构：


也就是说我们的template内容把<hello></hello>标签内部的div元素移除了，这有时候不是我们希望看到的结果，因为这种方式完全无法完成标签的嵌套!于是才引入了我们的transclude属性。

我们使用transclude来完成标签的嵌套工作：

<!doctype html>
<html ng-app="MyModule">
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<hello>
			<div>这里是指令内部的内容。</div>
		</hello>
	</body>
	<script src="framework/angular-1.3.0.14/angular.js"></script>
	<script src="transclude.js"></script>
</html>
我们看看transcude在内部是如何完成的： 

var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
    return {
    	restrict:"AE",
    	transclude:true,
    	template:"<div>Hello everyone!<div ng-transclude></div></div>"
    } 
});
很显然首先需要把transclude设置为true,然后在template中进行修改， 其中<div ng-transclude></div>就是告诉ng把hello标签内部的内容全部放在ng-transclude所在的位置。
DOM结构如下：

这就比较容易理解了，这里的hello标签没有被替换掉，因为没有指定replace:true，至于内部<div ng-transclude></div>还是会原封不动的保存，只是内部原来的DOM结构被这个ng-transclude指定的div包裹起来了!而且内部原来的DOM也被添加了一个内置的class，也就是ng-scope，这一点一定要注意!

我们在最后给出一个综合的例子：

<html ng-app='expanderModule'>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="ExpanderSimple.css"/>
		<script src="framework/angular-1.3.0.14/angular.js"></script>
		<script src="ExpanderSimple.js"></script>
	</head>
	<body>
	<!--指定一个controller为SomeController-->
		<div ng-controller='SomeController'>
		<!--自定义指令expander-->
			<expander class='expander' expander-title='title'>
				{{text}}
			</expander>
		</div>
	</body>
</html>
我们看看expander指令的签名： 

var expanderModule=angular.module('expanderModule', []);
//expander指令
expanderModule.directive('expander', function() {
	return {
		restrict : 'EA',
		replace : true,
		//直接把expander替换掉了
		transclude : true,
		//transclude表示可以嵌套标签
		scope : {
			title : '=expanderTitle'
		//这里是双向绑定，使用了'='进行双向绑定!
		},
		//直接替换掉,ng-show通过参数'showMe'来决定是否显示。ng-transclude指定了就是expander内部添加到ng-transclude中
		template : '<div>'
				 + '<div class="title" ng-click="toggle()">{{title}}</div>'
				 + '<div class="body" ng-show="showMe" ng-transclude></div>'
				 + '</div>',
	    //这里指定link函数
		link : function(scope, element, attrs) {
			scope.showMe = false;
			scope.toggle = function() {
				scope.showMe = !scope.showMe;
			}
		}
	}
});
//这里指定controller控制器
expanderModule.controller('SomeController',function($scope) {
	//在$scope中指定title和text
    $scope.title = '点击展开';
	$scope.text = '这里是内部的内容。';
});

至此，我们的transclude就可以理解了。

<在控制器中注入的$transclude服务>

           <div ng-controller="parentController">    
		    <button-bar>
		        <button class="primary" ng-click="onPrimary1Click()">{{primary1Label}}</button>
		        <button class="primary">Primary2</button>
		        <button class="secondary">Secondary1</button>
		    </button-bar>
		</div>
我们看看内部是如何注入$transclude服务的： 

var testapp = angular.module('testapp', []);
testapp.controller('parentController', ['$scope', '$window', function($scope, $window) {
    $scope.onPrimary1Click = function() {
        alert('Primary1 clicked');    
    };
    $scope.primary1Label = "Prime1"
}]);
testapp.directive('primary', function() {
    return {
        restrict: 'C',
        link: function(scope, element, attrs) {
            element.addClass('btn btn-primary');
        }
    }
});
testapp.directive('secondary', function() {
    return {
        restrict: 'C',
        link: function(scope, element, attrs) {
            element.addClass('btn');
        }
    }
});
testapp.directive('buttonBar', function() {
    return {
        restrict: 'EA',
        template: '<div class="span4 well clearfix"><div class="primary-block pull-right"></div><div class="secondary-block"></div></div>',
        replace: true,
        transclude: true,
        scope: {},//这里是独立作用域
        //我们在这里注入了$scope,$element,$transclude。这个控制器应该是指令的控制器
        controller: ['$scope', '$element', '$transclude', function ($scope, $element, $transclude) {
            $transclude(function(clone) {
                //$transclude中接收的函数里的参数含有指令元素的内容(指令元素的内容就是指令内部的元素，也就是应该被transclude的内容,这里指的是[text, button.primary.ng-scope, text, button.primary.ng-scope, text, button.secondary.ng-scope, text])
                //$element包含编译后的DOM元素(也就是把指令template进行了编译，这里指的是[div.span4.well.clearfix])，所以就可以在控制器中同时操作DOM元素和指令内容。
                var primaryBlock = $element.find('div.primary-block');
                var secondaryBlock = $element.find('div.secondary-block');
              var transcludedButtons = clone.filter(':button'); 
                angular.forEach(transcludedButtons, function(e) {
                    //每一个对象都有hasClass方法等
                    if (angular.element(e).hasClass('primary')) {
                        primaryBlock.append(e);
                    } else if (angular.element(e).hasClass('secondary')) {
                        secondaryBlock.append(e);
                    }
                });
            });
        }],
    };
});
最重要的是在我们的自定义指令中指定了一个controller函数： 

controller: ['$scope', '$element', '$transclude', function ($scope, $element, $transclude) {
            $transclude(function(clone) {
                //$transclude中接收的函数里的参数含有指令元素的内容(指令元素的内容就是指令内部的元素，也就是应该被transclude的内容,这里指的是[text, button.primary.ng-scope, text, button.primary.ng-scope, text, button.secondary.ng-scope, text])
                //$element包含编译后的DOM元素(也就是把指令template进行了编译，这里指的是[div.span4.well.clearfix])，所以就可以在控制器中同时操作DOM元素和指令内容。
                var primaryBlock = $element.find('div.primary-block');
                var secondaryBlock = $element.find('div.secondary-block');
              var transcludedButtons = clone.filter(':button'); 
                angular.forEach(transcludedButtons, function(e) {
                    //每一个对象都有hasClass方法等
                    if (angular.element(e).hasClass('primary')) {
                        primaryBlock.append(e);
                    } else if (angular.element(e).hasClass('secondary')) {
                        secondaryBlock.append(e);
                    }
                });
            });
        }],
    };
这时候我们在$transclude中传入的函数接受一个参数，这个参数代表我们需要通过transclude包含的内容，说白了也就是 我们的自定义指定内部的子元素集合!而$element就是我们指令的template编译后得到的DOM结构：我们看看这个接受到的clone的签名是怎么样的：


很显然就是我们在页面中自定义指令内部的元素进行编译后的DOM元素，有一点注意：这个编译后的DOM含有空格，也就是text元素类型。但是我们可能只是需要其中的button元素，于是在上面引入了filter方法，但是一直报错说"angular.js:62 TypeError: clone.filter is not a function",但是这个例子确实是可以运行的，所以这里我记录下来，以后慢慢理解。我们看看这时候ng为我们提供了那些方法，这些方法都是来源于jqLite的：



很显然如果我们需要对DOM进行操作，这些方法都是可以调用的。

<编译函数参数中的transclude>:

DOM结构和上面一样，我们看看指令内部的代码：

var testapp = angular.module('testapp', []);
//这里注入了$window对象
testapp.controller('parentController', ['$scope', '$window', function($scope, $window) {
    $scope.primary1Label = 'Prime1';
    $scope.onPrimary1Click = function() {
        $window.alert('Primary 1 clicked');                
    }
}]);
testapp.directive('primary', function() {
    return {
        restrict: 'C',
        link: function(scope, element, attrs) {
            element.addClass('btn btn-primary');
        }
    }
});
testapp.directive('secondary', function() {
    return {
        restrict: 'C',
        link: function(scope, element, attrs) {
            element.addClass('btn');
        }
    }
});
//这里是我们的指令buttonBar
testapp.directive('buttonBar', function() {
    return {
        restrict: 'EA',
        template: '<div class="span4 well clearfix"><div class="primary-block pull-right"></div><div class="secondary-block"></div></div>',
        replace: true,
        transclude: true,
        //为我们的编译函数参数中的transclude
        compile: function(elem, attrs, transcludeFn) {
            return function (scope, element, attrs) {
                //这里我们指定了第一个参数为scope
                transcludeFn(scope, function(clone) {
                    var primaryBlock = elem.find('div.primary-block');
                    var secondaryBlock = elem.find('div.secondary-block');
                    //这里的clone就是我们的应该被transclude的内容的DOM结构,当然其中也是包含空格符号的，所以需要过滤
                    console.log(clone);
                    var transcludedButtons = clone.filter(':button'); 
                    //对我们的button元素进行遍历
                    angular.forEach(transcludedButtons, function(e) {
                        if (angular.element(e).hasClass('primary')) {
                            primaryBlock.append(e);
                        } else if (angular.element(e).hasClass('secondary')) {
                            secondaryBlock.append(e);
                        }
                    });
                });
            };
        }
    };
});
其实这种方式是在我们自定义指令中使用了一个compile函数，并且在编译函数compile中指定了transclude参数： 

 compile: function(elem, attrs, transcludeFn) {
            return function (scope, element, attrs) {
                //这里我们指定了第一个参数为scope
                transcludeFn(scope, function(clone) {
                    var primaryBlock = elem.find('div.primary-block');
                    var secondaryBlock = elem.find('div.secondary-block');
                    //这里的clone就是我们的应该被transclude的内容的DOM结构,当然其中也是包含空格符号的，所以需要过滤
                    var transcludedButtons = clone.filter(':button'); 
                    //对我们的button元素进行遍历
                    angular.forEach(transcludedButtons, function(e) {
                        if (angular.element(e).hasClass('primary')) {
                            primaryBlock.append(e);
                        } else if (angular.element(e).hasClass('secondary')) {
                            secondaryBlock.append(e);
                        }
                    });
                });
            };
        }
我们为transclude函数传入了第一个参数为scope，同时第二个参数为一个函数，这个函数接受来自于自定义指令的内部元素，也就是需要被添加到ng-transclude指令中的元素。而外层函数compile接受第一个参数为elem，其代表的对template进行编译后的DOM树，第三个参数才是我们的transclude函数。阅读 angular中的transclude一文定能收获不少

liangklfang
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
AngularJS中transclude用法详解
11-28
本文实例讲述了AngularJS中transclude用法。分享给大家供大家参考，具体如下： Transclude – 在Angular的指令中，大家会看到有一个这样的一个配置属性，这个单词在英文字典里面也查询不到真实的意思，所以就用英文来标示它吧。如果你深入的使用angular的话，你就花很大一部分时间来创建自定义指令，那么就不可避免的要深入理解transclude。简单的讲，transclude主要完成以下工作，取出自定义指令中的内容(就是写在指令里面的子元素)，以正确的作用域解析它,然后再放回指令模板中标记的位置(通常是ng-transclude标记的地方)，虽然使用内建的ngTrans
AngularJS参数transclude
yangsong158的专栏
05-04 182
      transclude是一个可选的参数。如果设置了,其值必须为true,它的默认值是false。 嵌入有时被认为是一个高级主题,但某些情况下它与我们刚刚学习过的作用域之间会有非常 好的配合。使用嵌入也会很好地扩充我们的工具集,特别是在创建可以在团队、项目、AngularJS 社区之间共享的HTML代码片段时。嵌入通常用来创建可复用的组件,典型的例子是模态对话框或导航栏...
angular中的transclude
一个有趣、有料、有内涵的地方!
02-20 2452
Transclude - 在Angular的指令中，大家会看到有一个这样的一个配置属性，这个单词在英文字典里面也查询不到真实的意思，所以就用英文来标示它吧。如果你深入的使用angular的话，你就花很大一部分时间来创建自定义指令，那么就不可避免的要深入理解transclude。简单的讲，transclude主要完成以下工作，取出自定义指令中的内容(就是写在指令里面的子元素)，以正确的作用域解析它,
Angular黑科技之transclude
shut1k的博客
11-15 1535
Angular黑科技之transclude原文写于 2015-01-28 https://github.com/kuitos/kuitos.github.io/issues/17tansclude是angular生造的一个单词，不要去google啥意思相信我查不出来的。。。至于tranclude怎么翻译这件事我也是很懊恼，暂且将它译做 “隔离嵌入” 吧。具体含义大家在看过blog后自己体味吧。。。
AngularJS指令中的transclude
书香水墨
03-03 366
transclude可以设置为false（默认），true或者对象三种值，如果不设该属性就默认为false，也就是说你不需要将该指令所在元素包含的内容嵌入到模板中。 一、transclude设置为true 当transclude为true的时候，这时指令所在元素包含的内容会被嵌入到模板中有ng-transclude指令的元素中，例如： <hello> <p>hello</p> <hello> angular.module("app", [])..
angularJS 中$scope方法使用指南
10-24
在AngularJS中，$scope是控制器的载体，是模型和视图的连接点，负责传递数据和处理用户输入等。下面将详细说明如何在AngularJS中使用$scope方法。 ### $scope基本概念 在AngularJS中，$scope是每个控制器的子作用...
angularjs指令中的compile与link函数详解
10-25
本文将深入探讨AngularJS指令中的`compile`和`link`函数，以及它们的变体`pre-link`和`post-link`，帮助你更好地理解和使用这些函数。 首先，我们要知道AngularJS是如何处理指令的。当页面DOM加载完成后，AngularJS...
Angular中$compile源码分析
09-02
本文将深入探讨`$compile`服务的源码分析，帮助我们更好地理解其工作原理。 首先，`$compile`服务分为两个主要阶段：编译（Compile）和链接（Link）。编译阶段是解析DOM，找到所有的Angular指令，并创建相应的链接...
AngularJS中的Directive实现延迟加载
10-22
在这段代码中，`$interpolate`服务被用来将数据源中的值编译缓存起来。在编译函数中，我们清除`delay-bind`属性的值以避免在DOM加载时就已经显示。然后，在`post-link`函数中监听触发事件（在这个例子中是`mouse...
angular_transclude.html
05-24
有完整的例子和学习地址供大家参考，以帮助大家正确理解transclude的用法。有不懂的问题可以留言，相互交流
angular.js指令中transclude选项及ng-transclude指令详解
10-19
主要研究一下如何使用ng-transclude指令,以及指令的transclude选项的相关资料，文中介绍的非常详细，并给出了完整的示例代码大家参考学习，需要的朋友们下面来一起看看吧。
基于angular中的重要指令详解($eval,$parse和$compile)
09-01
在AngularJS中，$eval、$parse和$compile是三个非常关键的指令和服务，它们在数据绑定和视图渲染过程中起着至关重要的作用。本文将深入解析这三个概念，以帮助你更好地理解和应用AngularJS。 首先，让我们从$eval...
AngularJS中的指令全面解析(必看)
10-22
本文将全面解析AngularJS中的指令，帮助读者理解其在框架中的重要性以及如何创建和使用指令。 首先，AngularJS的指令系统是框架吸引人的特点之一，它和双向数据绑定一起，为开发者提供了丰富的用户界面组件和交互...
angularJs中datatable实现代码
10-19
在AngularJS中，DataTable是一个非常流行的插件，用于展示数据并提供高级的表格功能，如排序、分页、过滤等。在本篇文章中，我们将深入探讨如何在AngularJS项目中集成和使用DataTable。 首先，我们需要引入必要的库...
AngularJS Directive指令中transclude属性
水滴的专栏
04-27 481
定义指令对象时，可以不添加transclude属性，如果添加该属性，那么它的属性值是布尔类型的，默认值为false，表示不开启属性，如果设置为true值时，则开启了该属性；当开启了transclude属性后，就可以在模板中通过ng-transclude方式替换指令元素中的内容。假如指令元素中的内容如下 <div>hello!</div> 指令模板中的内容代码如下 <...
AngularJS - transclude选项以及ng-transclude指令
wust_cyl的博客
09-02 653
好文章，不迷路
angular中transclude的理解
weixin_30701575的博客
05-31 110
　　今天被这个transclude搞糊涂了，弄了半天，才知道原来使用起来很简单。很烦恼为社么书中的对于这个的介绍这么晦涩难懂。直到看到了这篇文章，才让我弄清楚了。 一、transclude介绍 　　transclude是angular中自定义指令中的一个参数。中文就是嵌入的意思。也就是说通过这个参数设置，可以将指令内容嵌入到自定义指令中的模版中。其值默认是false,当为true时，会起到嵌入...
$(CROSS_COMPILE)gcc 是啥
最新发布
06-08
$(CROSS_COMPILE)gcc 是一个变量，用于指定交叉编译器的路径和前缀。在 Linux 上，如果要编译运行在嵌入式设备或其他平台上的程序或内核模块，通常需要使用交叉编译器，因为这些设备或平台的 CPU 架构和主机 CPU 不同，需要使用特定的交叉编译器才能生成可执行程序或内核模块。交叉编译器的前缀通常是由 CPU 架构和厂商名组成，比如 arm-linux-gcc、mipsel-linux-gcc 等。$(CROSS_COMPILE)gcc 就是指定了交叉编译器的前缀，具体的路径和前缀需要根据实际情况进行设置。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值