AngularJS中transclude用法详解
这篇文章主要介绍了AngularJS中transclude用法,详细分析了transclude的具体功能、使用技巧与相关注意事项,需要的朋友可以参考下
本文实例讲述了AngularJS中transclude用法。分享给大家供大家参考,具体如下:
Transclude - 在Angular的指令中,大家会看到有一个这样的一个配置属性,这个单词在英文字典里面也查询不到真实的意思,所以就用英文来标示它吧。如果你深入的使用angular的话,你就花很大一部分时间来创建自定义指令,那么就不可避免的要深入理解transclude。简单的讲,transclude主要完成以下工作,取出自定义指令中的内容(就是写在指令里面的子元素),以正确的作用域解析它,然后再放回指令模板中标记的位置(通常是ng-transclude标记的地方),虽然使用内建的ngTransclude对于基本的transclude操作已经足够简单,但是在文档中对这个transclude的解释还是有存在很多疑惑,比如说:
在compile函数中接收到了一个叫transclude的参数是什么东西呢?有什么用呢?
在控制器中也有个叫$transclude的可以通过依赖注入的服务,这又是什么呢?
隔离作用域跟transclude有什么关系?
属性的transclude操作
接下来我们将一个个的解释:
基本的transclude
我们通过一个基本的transclude例子来讲解吧,我们现在要创建的是一个叫buttonBar的指令,用户可以通过它来添加一组button到页面上,这个指令会对不同的button进行位置的排列。以下例子css样式是使用Bootstrap框架。
在fiddle中查看例子:http://jsfiddle.net/ospatil/A969Z/157/
Html代码
<div ng-controller="parentController">
<button-bar>
<button class="primary" ng-click="onPrimary1Click()">{{primary1Label}}</button>
<button class="primary">Primary2</button>
</button-bar>
</div>
Js代码
var testapp = angular.module('testapp', []);
testapp.controller('parentController', ['$scope', '$window', function($scope, $window) {
console.log('parentController scope id = ', $scope.$id);
$scope.primary1Label = 'Prime1';
$scope.onPrimary1Click = function() {
$window.alert('Primary1 clicked');
};
}]);
testapp.directive('primary', function() {
return {
restrict: 'C',
link: function(scope, element, attrs) {
element.addClass('btn btn-primary');
}
}
});
testapp.directive('buttonBar', function() {
return {
restrict: 'EA',
template: '<div class="span4 well clearfix"><div class="pull-right" ng-transclude></div></div>',
replace: true,
transclude: true
};
});
我们先看下HTML标签,buttonBar指令包裹着几个button元素。而button元素也被链接上了基于class的primary指令,不要太在意这个primary指令的功能它只不过为button元素添加一些css的样式而已。现在我们来看buttonBar指令,它提供了一个transclude:true属性,同时在它的模板里面使用ng-transclude指令。在运行的过程中,Angular获取到自定义指令的内容,处理完了之后把结果放到了模板中链接上ng-transclude的div。
transclude到多个位置
现在我们来增强下我们的buttonBar指令的功能,我们增加了两种按钮,primary和secondary,其中primary按钮是排右边,secondary是排左边。所以要做到这个功能,它必须能够取出指令的内容,然后把它们分别添加到不同的div中,一个用来放primary按钮, 一个用来放secondary按钮。
这样的话,默认的机制已经满足不了我们的要求,于是我们有了另外一种方法:
设置transclude为true
手工移动button元素到合适的div
最后,在指令的编译或链接函数中移除原始的用来transclude操作的元素
这种方法就是先把所有的内容插入到ng-transclude标记的元素中,然后在link函数中再找出元素的插入的元素,重新放到元素的其他地方,最后删除原来暂存内容的元素。
在fiddle中查看例子:http://jsfiddle.net/ospatil/A969Z/158/
Html代码
<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>
Js代码
var testapp = angular.module('testapp', []);
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');
}
}
});
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 class="transcluded" ng-transclude></div></div>',
replace: true,
transclude: true,
link: function(scope, element, attrs) {
var primaryBlock = element.find('div.primary-block');
var secondaryBlock = element.find('div.secondary-block');
var transcludedBlock = element.find('div.transcluded');
var transcludedButtons = transcludedBlock.children().filter(':button');
angular.forEach(transcludedButtons, function(elem) {
if (angular.element(elem).hasClass('primary')) {
primaryBlock.append(elem);
} else if (angular.element(elem).hasClass('secondary')) {
secondaryBlock.append(elem);
}
});
transcludedBlock.remove();
}
};
});
虽然这种方法达到了我们的目的,但是允许默认的transclude操作,然后再人工的从DOM元素中移出不是非常有效率的。因此,我们有了compile函数中的transclude参数和控制器中的$transclude服务
编译函数参数中的transclude
开发者指南中给了我们以下的关于指令中编译函数的形式:
1
|
function compile(tElement, tAttrs, transclude) { ... } |
其中关于第三个参数transclude的解释是:
transclude - A transclude linking function: function(scope, cloneLinkingFn).
好的,现在我们利用这个函数来实现我们刚才讲到的功能,从而不需要再先暂存内容,然后再插入到其他地方。
在fiddle中查看例子:http://jsfiddle.net/ospatil/A969Z/161/
Html代码
<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>
Js代码
var testapp = angular.module('testapp', []);
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');
}
}
});
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,
compile: function(elem, attrs, transcludeFn) {
return function (scope, element, attrs) {
transcludeFn(scope, function(clone) {
var primaryBlock = elem.find('div.primary-block');
var secondaryBlock = elem.find('div.secondary-block');
var transcludedButtons = clone.filter(':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);
}
});
});
};
}
};
});
注意到,transcludeFn函数需要一个可用的scope作为第一个参数,但是编译函数中没有可用的scope,所以这里需要在链接函数中执行transcludeFn。这种方法实际上是在link函数中同时操作编译后的DOM元素和模板元素(主要是因为transcludeFn函数中保存着指令的内容)。
可在控制器中注入的$transclude服务
在开发者指南中对$transclude服务是这么解释的:
$transclude - A transclude linking function pre-bound to the correct transclusion scope: function(cloneLinkingFn).
看看如何用在我们的例子中:
在fiddle中查看例子:http://jsfiddle.net/ospatil/A969Z/162/
Hmtl代码
<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>
Js代码
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: {},
controller: ['$scope', '$element', '$transclude', function ($scope, $element, $transclude) {
$transclude(function(clone) {
var primaryBlock = $element.find('div.primary-block');
var secondaryBlock = $element.find('div.secondary-block');
var transcludedButtons = clone.filter(':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中接收的函数里的参数含有指令元素的内容,而$element包含编译后的DOM元素,所以就可以在控制器中同时操作DOM元素和指令内容,跟上文的compile函数的实现方式有异曲同工之处,这里有几点需要注意,这个控制器应该是指令的控制器,另一个注意到上文除了第一种方法,其他的地方都没有用到ng-transclude,因为无需插入到模板中。
Transclude 和 scope
在开发者指南中提到了a directive isolated scope and transclude scope are siblings,这到底是什么意思呢?假如你认真看前文的例子的话,你就会发现parentController控制器创建了一个作用域,buttonBar指令在parentController下面创建了一个孤立作用域,而根据Angular文档,transclude也创建了另外一个作用域,因此指令的隔离作用域跟transclude作用域是基于同一个父作用域的兄弟作用域。
transclude内容放入元素的属性
实际上,你不可以这么做,但是你可以通过一种变通的方法来实现这种效果
Html代码
var testapp = angular.module('testapp', [])
testapp.directive('tag', function() {
return {
restrict: 'E',
template: '<h1><a href="{{transcluded_content}}">{{transcluded_content}}</a></h1>',
replace: true,
transclude: true,
compile: function compile(tElement, tAttrs, transclude) {
return {
pre: function(scope) {
transclude(scope, function(clone) {
scope.transcluded_content = clone[0].textContent;
});
}
}
}
}
});
这里没有操作DOM元素,只是把元素的文本内容复制给了作用域属性,然后在通过作用域传给属性。
另外要注意的是,这里的clone参数是jquery或angular.element封装的整个模板元素。
var
testapp = angular.module(
'testapp'
, []);
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'
);
}
}
});
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
,
compile:
function
(elem, attrs, transcludeFn) {
return
function
(scope, element, attrs) {
transcludeFn(scope,
function
(clone) {
var
primaryBlock = elem.find(
'div.primary-block'
);
var
secondaryBlock = elem.find(
'div.secondary-block'
);
var
transcludedButtons = clone.filter(
':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);
}
});
});
};
}
};
});
AngularJS中transclude用法详解的更多相关文章
- AngularJS select中ngOptions用法详解
AngularJS select中ngOptions用法详解 一.用法 ngOption针对不同类型的数据源有不同的用法,主要体现在数组和对象上. 数组: label for value in a ...
- angularJS中$apply()方法详解
这篇文章主要介绍了angularJS中$apply()方法详解,需要的朋友可以参考下 对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的 ...
- C++中的STL中map用法详解(转)
原文地址: https://www.cnblogs.com/fnlingnzb-learner/p/5833051.html C++中的STL中map用法详解 Map是STL的一个关联容器,它提供 ...
- C++中const用法详解
本文主要内容来自CSDN论坛: http://bbs.csdn.net/topics/310007610 我做了下面几点补充. 补充: 1. 用const声明全局变量时, 该变量仅在本文件内可见, 类 ...
- 转:AngularJS的Filter用法详解
Filter简介 Filter是用来格式化数据用的. Filter的基本原型( '|' 类似于Linux中的管道模式): {{ expression | filter }} Filter可以被链式使用 ...
- AngularJS的Filter用法详解
上一篇讲了自定义Directive,本篇是要讲到AngularJS的Filter. Filter简介 Filter是用来格式化数据用的. Filter的基本原型( '|' 类似于Linux中的管道模式 ...
- Angularjs中的$q详解
先说说什么是Promise,什么是$q吧.Promise是一种异步处理模式,有很多的实现方式,比如著名的Kris Kwal's Q还有JQuery的Deffered. 什么是Promise 以前了解过 ...
- angularjs中的$http详解
语法: 要将区别先弄清$http服务,它是对原生XMLHttpRequest对象的简单封装,是只能接受一个参数的方法, 这个方法会返回一个promise对象,具有sccess和error两个方法.当然 ...
- c/c++中define用法详解及代码示例
https://blog.csdn.net/u012611878/article/details/52534622 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog. ...
随机推荐
- 【python数据挖掘】爬取豆瓣影评数据
概述: 爬取豆瓣影评数据步骤: 1.获取网页请求 2.解析获取的网页 3.提速数据 4.保存文件 源代码: # 1.导入需要的库 import urllib.request from bs4 impo ...
- 如何在 vue 中添加权限控制管理?---vue中文社区
前言 在一个项目中,一些功能会涉及到重要的数据管理,为了确保数据的安全,我们会在项目中加入权限来限制每个用户的操作.作为前端,我们要做的是配合后端给到的权限数据,做页面上的各种各样的限制. 需求 因为 ...
- Javaweb项目中修改表单时数据回显方法
1.前言 先来说下什么是数据回显,比如我要修改我的个人信息,点击修改按钮后进入修改界面,在这个界面中直接将原来的信息显示在表单中,而不是空表单,这就是数据回显 2.思路 当点击修改的时候,从数据库中查 ...
- Jenkins集成jacoco收集集成测试覆盖率
Jenkins集成jacoco收集集成测试覆盖率 2020-02-28 目录 0 整体思路1 安装版本2 全局工具配置3 Jenkins创建JacocoIntegrateTestDemo项目 3.1 ...
- MySQL 8 InnoDB 集群生产部署
生产部署InnoDB集群 1.先决条件 InnoDB集群使用组复制技术,所以InnoDB中的实例需要满足组复制要求.可以查看MySQL文档中组复制相关的部分,也可以通过AdminAPI提供的dba.c ...
- Java Web笔记(2)
学习笔记,狂神说java,链接:https://www.bilibili.com/video/av68833391 5.Maven 我为什么要学习这个技术? 在Javaweb开发中,需要使用大量的ja ...
- css3基本选择器+属性选择器+动态伪类+UI状态伪类+结构类
后代选择器 祖先元素 后代元素{ } 子元素选择器(直接子元素选择器) 父元素>子元素{ } 兄弟选择器 元素+兄弟元素(紧邻该元素之后的下一个兄弟元素) 所有兄弟元素选择器 元素~兄弟元素(该 ...
- 【39】为什么使用卷积?(Why convolutions?)
为什么使用卷积?(Why convolutions?) 我们来分析一下卷积在神经网络中如此受用的原因,然后对如何整合这些卷积,如何通过一个标注过的训练集训练卷积神经网络做个简单概括.和只用全连接层相比 ...
- Page Object设计模式(二)——poium测试库
一.简介 poium是一个基于Selenium/appium的Page Object测试库,最大的特点是简化了Page层元素的定义. 项目地址:https://github.com/SeldomQA/ ...
- python字符串前面加上'r'的作用
在打开文件的时候open(r'c:\....') 加r和不加''r是有区别的 'r'是防止字符转义的 如果路径中出现'\t'的话 不加r的话\t就会被转义 而加了'r'之后'\t'就能保留原有的样子 ...