AngularJS transclude 理解及例子

一、概念理解　

　　transclude可以在指令中让使用者自定义模板，也就是说，指令中模板的一部分，让指令的使用者动态指定；与指定中的Scope属性值为{}时候的作用类似，scope属性让指令使用者动态制定属性数据和事件，但是这里是模板，使用scope属性不合适。

　　也就是说，如果你在定义指令的时候，想要它在具体使用时中间加一些内容，那么你就要用transclusion。

　　使用时需要通过以下两点：

　　1、在指令的template中通过属性或者元素的方式标记放置动态内容的位置，比如<ng-transclude></ng-transclude>；ng-tranclude决定了在什么地方放置嵌入部分。

　　2、在指令的返回对象中增加transclude: true

　　也就是说，取出自定义指令中的内容(就是写在指令里面的子元素)，以正确的作用域解析它，然后再放回指令模板中标记的位置(通常是ng-transclude标记的地方)。

二、transclude与作用域

　　在定义一个指令时，如果不显式声明scope，那么指令的作用域就是父作用域。如果声明scope:true或者scope:{}，那么指令会生成一个自己的作用域，前者是原型继承，后者是独立作用域。使用transclusion，会生成一个新的作用域，直接原型继承于父作用域。

三、例子

1、入门例子

<body ng-app="myApp"><div class="a"><my-transclusion name="huyx">嵌入的内容</my-transclusion>
</div>
</body>

angular.module('myApp', []).directive('myTransclusion', function () {return {restrict: 'E',transclude: true,scope: { name:'@' },template: '<div>' +'<div>{{name}}</div><br>' +'<div ng-transclude></div>' +'</div>'};});

　　运行结果：

　　即，把使用指令的地方的内容，这里是“”嵌入的内容“，放到了指令模板中ng-transclude位置。

　生成页面源码：

2、复杂点例子

　　button-bar指令使用的地方的内容（即下边的两个button），替换到指令模板ng-transclusion的地方。而且，在项目不同的地方多出使用该指令，根据需要可以指定不同的动态内容，插入指定的模板指定位置，而指定的其他部分可以共用。

<div ng-controller="parentController"><button-bar><button class="primary" ng-click="onPrimary1Click()">{{primary1Label}}</button><button class="primary">Primary2</button></button-bar>
</div>

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};
});

转载于:https://www.cnblogs.com/shawnhu/p/8503223.html

AngularJS transclude 理解及例子相关推荐

AngularJS 深入理解 $scope 转载▼
AngularJS 深入理解 $scope 转载▼ (2015-04-07 14:09:50) $scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达式执行的 ...
【数据收集】名义变量、序级变量、区间变量、比率变量的理解及例子
[数据收集]名义变量.序级变量.区间变量.比率变量的理解及例子名义变量(Nominal Variable) 分类及举例序级变量(Ordinal Variable) 分类和举例区间变量(Inter ...
Java里main的写法_main方法的深入理解和例子
大家好,又是一个令人振奋的周三啊,今天说一下main方法,大家应该对它很熟悉了,在Java中,main()方法是Java应用程序的入口方法,也就是说,程序在运行的时候,第一个执行的方法就是main() ...
AngularJs的理解
随着时代的不断进步,各种各样的开发理念与开发框架不断的提出与发展,目前来说,除了游戏,QQ,office这类软件之外,新出的一些软件应用开始出现两个方向,一个是以web为主的webApp,一个是以移动 ...
Angularjs 观察者模式理解
观察者模式观察者模式从字面意思就能知道它主要是做什么的,所以理解起来不难,但实际实现还是有一些难度. 观察者模式是定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得 ...
遗传算法的理解及例子解释
什么是遗传算法? 遗传算法是模拟生物在自然环境中的遗传和进化过程而形成的一种自适应全局优化概率搜索算法遗传算法的基本原理遗传算法将"优胜劣汰,适者生存"的生物进化原理引入优化参 ...
Labview移位寄存器理解（例子说明）
引言 Labview的while循环里面有移位寄存器,看了很多例子才搞懂,把自己的理解简单记录一下. 还是用例子来说明比较好,下面文字摘自博客[1] 如下图,上面循环对移位寄存器进行过初始化,下面的循 ...
angularJS概念理解三：控制器
在AngularJS中,实现数据绑定的核心是scope对象. 控制器让我们有机会在scope上定义我们的业务逻辑,具体说,可以使用控制器: 对scope对象进行初始化向scope对象添加方法在模板 ...
CTR深度学习模型之 DIN(Deep Interest Network) 的理解与例子
在电商领域,每个用户都有丰富的历史行为数据,这些数据具有如下特点: 多样性(Diversity):用户可能对多种商品感兴趣,例如手机.衣服. 局部激活(Local Activation):用户是否点击 ...
Angularjs Nodejs Grunt 一个例子
做了一个简单的示例,目的是记录环境配置以及这套框架的结构流程. 1.配置环境默认nodejs已安装. 安装以下模块:express(nodejs框架),grunt(javascript task r ...

AngularJS transclude 理解及例子

AngularJS transclude 理解及例子相关推荐

最新文章

热门文章