一、概念理解 

  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 理解及例子的更多相关文章

  1. AngularJS 深入理解 $scope 转载▼

    AngularJS 深入理解 $scope 转载▼ (2015-04-07 14:09:50)     $scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达 ...

  2. angularJS transclude

    参考来源:彻底弄懂AngularJS中的transclusion 对以上文章进行摘录.总结和测试记录 在使用指令的时候,如果想要使用指令中的子元素,那么你就要用transclusion. 指令的DDO ...

  3. angular 自定义指令 directive transclude 理解

    项目中断断续续的用了下angular,也没狠下心 认真的学习.angular 特别是自定义指令这块 空白. transclude 定义是否将当前元素的内容转移到模板中.看解释有点抽象. 看解释有点抽象 ...

  4. AngularJS 深入理解 $scope

    $scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了$scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更 ...

  5. 『AngularJS』理解$Scope

    理解$Scope 执行概要 在AngularJS,一个子scope通常原型继承于它的父scope.应用于这个规则的表达式是一个使用scope:{...}的指令,这将创建一个『孤岛』scope(非原型继 ...

  6. angularjs transclude demo

    <!doctype html> <html lang="en" ng-app="expanderModule"> <head> ...

  7. [AngularJS] Transclude -- using what existing in DOM to replace the template elements in directive

    var app = angular.module("phoneApp", []); app.controller("AppCtrl", function($sc ...

  8. angularjs深入理解向指令传递数据,双向绑定机制

    <!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...

  9. Java ClassLoader加载机制理解 实际例子

    针对 Java ClassLoader加载机制理解, 做了个如何自定制简单的ClassLoader,并成功加载指定的类. 不废话,直接上代码. package com.chq.study.cl; im ...

随机推荐

  1. java读取properties文件时候要注意的地方

    java读取properties文件时,一定要注意properties里面后面出现的空格! 比如:filepath = /home/cps/ 我找了半天,系统一直提示,没有这个路径,可是确实是存在的, ...

  2. nodejs 开发服务端 child_process 调试方法(1)

    由于最近正在做一个服务端项目,采用了nodejs引擎开发,主要是master-worker工作机制;主进程可以直接调试,但是子进程调试好像有点麻烦,我没有找到好的方法; worker这里,我分拆成了几 ...

  3. Linux 终端设备

    <Linux终端设备详解> https://www.cnblogs.com/shineshqw/articles/2423989.html

  4. PHP redis 群发短信

    $redis = new \Redis(); $redis->connect('127.0.0.1', 6379); $list = M('Sms')->field('phone')-&g ...

  5. Win 10 关闭了.net framework 3.5后再开启不成功

    背景: Win10 想要使用IETester来测试下页面的浏览器兼容性.在“控制面板”里关闭了.net framework 3.5,再重新开启. 问题: 在重新开启的时候,提示不成功.错误代码0x80 ...

  6. tomcat+bean例子

    C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps\app\WEB-INF\classes\文件夹下 建立beanTestPa ...

  7. AX_Args

    Args args; FormRun formRun; ; args = new Args(); args.name(formstr(FormName)); args.caller(); args.r ...

  8. 【WebService】WebService之CXF的拦截器(五)

    CXF拦截器介绍 CXF拦截器是功能的主要实现单元,也是主要的扩展点,可以在不对核心模块进行修改的情况下,动态添加功能.当服务被调用时,会经过多个拦截器链(Interceptor Chain)处理,拦 ...

  9. JS高级- OOP-ES5

    1. OOP 面向对象三大特点: 封装,继承,多态 封装: 问题: 构造函数可重用代码和结构定义,但无法节约内存 为什么: 放在构造函数内的方法定义,每new一次,都会反复创建副本——浪费内存 解决: ...

  10. mysql中的handler_read_%

    mysql> show status like 'handler_read_%'; +-----------------------+-------+ | Variable_name | Val ...