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
};
});
AngularJS transclude 理解及例子的更多相关文章
- AngularJS 深入理解 $scope 转载▼
AngularJS 深入理解 $scope 转载▼ (2015-04-07 14:09:50) $scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达 ...
- angularJS transclude
参考来源:彻底弄懂AngularJS中的transclusion 对以上文章进行摘录.总结和测试记录 在使用指令的时候,如果想要使用指令中的子元素,那么你就要用transclusion. 指令的DDO ...
- angular 自定义指令 directive transclude 理解
项目中断断续续的用了下angular,也没狠下心 认真的学习.angular 特别是自定义指令这块 空白. transclude 定义是否将当前元素的内容转移到模板中.看解释有点抽象. 看解释有点抽象 ...
- AngularJS 深入理解 $scope
$scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了$scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更 ...
- 『AngularJS』理解$Scope
理解$Scope 执行概要 在AngularJS,一个子scope通常原型继承于它的父scope.应用于这个规则的表达式是一个使用scope:{...}的指令,这将创建一个『孤岛』scope(非原型继 ...
- angularjs transclude demo
<!doctype html> <html lang="en" ng-app="expanderModule"> <head> ...
- [AngularJS] Transclude -- using what existing in DOM to replace the template elements in directive
var app = angular.module("phoneApp", []); app.controller("AppCtrl", function($sc ...
- angularjs深入理解向指令传递数据，双向绑定机制
<!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...
- Java ClassLoader加载机制理解 实际例子
针对 Java ClassLoader加载机制理解, 做了个如何自定制简单的ClassLoader,并成功加载指定的类. 不废话,直接上代码. package com.chq.study.cl; im ...
随机推荐
- dpdk中文文档
Linux平台上DPDK入门指南 1. 简介 1.1. 文档地图 2. 系统要求 2.1. X86 上预先设置 BIOS 2.2. 编译DPDK 2.3. 运行DPDK应用程序 3. 使用源码编译DP ...
- eclipse集成svn进行项目开发
在用eclipse进行项目开发的时候,报了一个错误:switch不支持String的参数.这个问题的原因是因为jre版本低于1.7,而当前的eclipse版本最高只能选1.6,无奈,我只能考虑换ecl ...
- P<0.05就够了？还要校正！校正！3个方法献上
P<0.05就够了?还要校正!校正!3个方法献上 (2017-01-03 17:55:12) 转载▼ 分类: 数理统计 (转 医生科研助手 解螺旋 微信公众号) 当有多组数据要比较时, ...
- 洛谷1894 [USACO4.2]完美的牛栏The Perfect Stall
原题链接 二分图最大匹配板子. 每个奶牛向它愿意去的牛棚连边,跑二分图最大匹配即可. 这里我用的是匈牙利算法. #include<cstdio> #include<cstring&g ...
- Tinyos学习笔记（二）
1.TinyOS communication tools java serialApp -comm serial@/dev/ttyUSB0:telosb java net.tinyos.tools.L ...
- java指针与引用（转载）
大家都知道java和C#中没有指针这个概念.但是也导致了编程中常常忽略了对象与引用的区别,难道java真的没有指针吗?句柄是什么?变量地址在哪里?没有地址是不可能的,关键是java中如何避免了指针这个 ...
- 论坛：设计实体-->分析功能-->实现功能 之 《分析功能》
其中 管理文章 的功能没有做,以下做的设计 浏览与参与 功能的步骤 分析功能 5个功能. 7个请求. 实现功能 Action, 7个方法 Service Dao Jsp For ...
- proguard-rules.pro、混淆、导jar包
前记: 买了一个<精通Android Studio>本来最想看的是关于混淆导jar包的,哪知道没有,有点小失望. 好吧,自己来. 在用Android Studio开发的时候,把minify ...
- IOS初级：UIScrollView & UIPageControl
UIScrollView其实构建的就像一列很长的火车,每滑动一个屏幕,展示一节车厢. //主屏幕高度 #define kScreenHeight [UIScreen mainScreen].bound ...
- AnsiToUtf8 和 Utf8ToAnsi
在服务端数据库的处理当中,涉及中文字符的结构体字段,需要转为Utf8后再存储到表项中.从数据库中取出包含中文字符的字段后,如果需要保存到char *类型的结构体成员中,需要转为Ansi后再保存.从数据 ...