一、概念理解　

　　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. 函数调用的四种方式 和 相关的 --- this指向

    this:表示被调用函数的上下文对象. arguments:表示函数调用过程中传递的所有参数. 这两个参数都是隐式的函数参数.会静默传递给函数,并且和函数体内显式声明的参数一样可正常访问. argum ...

  2. Python.URLs

    1. The Future of Asynchronous IO in Python https://medium.com/@paulcolomiets/the-future-of-asynchron ...

  3. 设计师们做UI设计和交互设计、界面设计等一般会去什么网站呢？

    明明可靠颜值吃饭,却偏偏要靠才华立身,UI设计师就是这样一群神奇的物种.面对“大的同时小一点”.“五彩斑斓黑”.“下班之前给我”……这些甲方大大刁钻的需求,设计师每天都在咬牙微笑讨生活.你可以批评我的 ...

  4. csdn博客

    https://blog.csdn.net/lydstory123?t=1 以前还有几篇文章  忘记了

  5. Python导入自定义类时显示错误：attempted relative import beyond top-level package

    显示这个错误可能有两个原因: 1.文件夹中没有包含__init__.py文件,该文件可以为空,但必须存在该文件. 2.把该文件当成主函数入口,该文件所在文件夹不能被解释器视作package,所以可能导 ...

  6. python之并发编程进阶篇9

    一.守护进程和守护线程 1)守护进程的概念 什么是守护进程: 守护: 在主进程代码结束情况下,就立即死掉 守护进程本质就是一个子进程,该子进程守护着主进程 为何要用守护进程 守护进程本质就是一个子进程 ...

  7. rails 部署 can't find gem bundler (>= 0.a) with executable bundle

    多方寻找终得果,先感谢原作者,原作者博文 原因是本地项目bundler 和 服务器 bundler 版本不一致导致,项目是在本地建立,故Gemfile.lock最后一行BUNDLED WITH中是1. ...

  8. 26、xcode8.0 解决没有iPhone4模拟器问题

    第一步:随便打开Xcode项目 ,点击电脑屏幕右上角 Xcode->Preference 第二步: 点击下载ios 8.1 Simulator 等到下载完成即可在xcode中添加iphone4s ...

  9. 2018.11.08 NOIP模拟 班车（倍增+dfs+bit）

    传送门 对于每个点离线处理出向上走2i2^i2i班车到的最上面的点. 然后每个询问(u,v)(u,v)(u,v)先把(u,v)(u,v)(u,v)倍增到刚好走不到lcalcalca的情况(有一个点如果 ...

  10. Promise.all函数的使用

    Promise.all([this.getCity('guess'),this.getCity('hot'),this.getCity('group')]).then(res=>{ // con ...