直接上代码
app.controller('MainCtrl', function($scope) {
$scope.person = {
name: 'John Doe',
profession: 'Fake name'
};
$scope.header = 'Person';
});
app.directive('person', function() {
return {
restrict: 'EA',
scope: {
header: '='
},
transclude:true,
template: '<div ng-transclude></div>',
link: function(scope, element, attrs) {
scope.person = {
name: 'Directive Joe',
profession: 'Scope guy'
};
scope.header = 'Directive\'s header';
}
};
});
<body ng-controller="MainCtrl">
<person header="header">
<h2>{{header}}</h2>
<p>Hello, I am {{person.name}} and,</p>
<p>I am a {{person.profession}}</p>
</person>
</body>
以上代码会变成
<body ng-controller="MainCtrl" class="ng-scope">
<person header="header" class="ng-isolate-scope"><div ng-transclude="">
<h2 class="ng-scope ng-binding">Directive's header</h2>
<p class="ng-scope ng-binding">Hello, I am John Doe and,</p>
<p class="ng-scope ng-binding">I am a Fake name</p>
</div></person>
</body>
即原有的属性不会被替换，而原来没有的属性，则会使用新的
如果想通过指令来控制接受父级的scope值还是子集的scope值，可以通过如下代码区分
app.directive('person', function() {
return {
restrict: 'EA',
scope: {
header: '='
},
transclude:true,
link: function(scope, element, attrs, ctrl, transclude) {
scope.person = {
name: 'Directive Joe',
profession: 'Scope guy'
};
scope.header = 'Directive\'s header';
transclude(scope.$parent, function(clone, scope) {
element.append(clone);
});
}
};
});
和
app.directive('person', function() {
return {
restrict: 'EA',
scope: {
header: '='
},
transclude:true,
link: function(scope, element, attrs, ctrl, transclude) {
scope.person = {
name: 'Directive Joe',
profession: 'Scope guy'
};
scope.header = 'Directive\'s header';
transclude(scope, function(clone, scope) {
element.append(clone);
});
}
};
});
以上两组代码中，transclude传递的参数中，第一个参数分别传递的为scope.$parent和scope
参考自
http://angular-tips.com/blog/2014/03/transclusion-and-scopes/
分享到：
相关推荐
6. **Scope**：Scope是AngularJS中的一个关键概念，它是模型和视图之间的桥梁。1.3.8版本对Scope的事件传播、原型继承和作用域链进行了优化。 7. **服务**：AngularJS的服务提供了许多实用的功能，如$http服务用于...
这意味着，当使用`ez-transclude`时，你可以自由地在组件内部和外部共享数据，或者在嵌套的模板中访问父级控制器的方法，而无需通过`$parent`或`$scope.$parent`这样的引用。 下面我们将深入探讨`ez-transclude`的...
在Angular.js中，指令是构建可复用组件和复杂用户界面的核心工具。它们允许开发者扩展HTML，赋予HTML新的语义，以实现动态行为和数据绑定。这篇教程将深入讲解Angular.js指令的一些重要属性，帮助你更好地理解和应用...
在AngularJS中，`transclude`是一个非常关键的特性，用于在自定义指令中包含和管理用户提供的内容。当我们创建自定义指令时，有时需要在指令内部动态地插入和渲染DOM元素，`transclude`正是为此目的服务的。在本文中...
Web应 中， Angular让我们可以通过DI来创建像Controllers和Directives这样的对象. 我们还可以创 建 的依赖对象, 当我们要实 化它们时, Angular能 动实现注 。 3. compile和link的区别: 编译的时候，compile转换dom，...
通过这种方式，你可以轻松地在Angular应用中实现图片预览功能，同时保持代码的整洁和模块化。 总结来说，Angular中封装fancyBox涉及的主要步骤包括： 1. 获取fancyBox的最新版本并引入相关文件。 2. 在Angular项目...
本篇文章将深入探讨Angular1.x中的复杂指令，包括它们的创建、使用方式以及相关概念。 1. **指令的创建与使用** 指令通过`.directive()`工厂方法创建，它返回一个对象，该对象包含了描述指令行为的配置。例如，`...
Angular ng-click 防止重复提交实例是一个常见的问题，在 Angular 应用程序中，如果用户在短时间内多次点击按钮，可能会导致重复提交数据，从而影响应用程序的稳定性和性能。为了解决这个问题，本文将介绍两种方法来...
在本文中，我们将深入探讨如何基于Angular实现一个三级联动的生日插件。Angular是一个流行的JavaScript框架，用于构建单页面应用程序（SPA）。这个生日插件旨在提供一个用户友好的界面，让用户选择他们的生日，通过...
Angular.js中的`transclusion`是框架提供的一种特性，允许我们将DOM元素的内容插入到自定义指令的内部，从而实现更加灵活的模板结构。在AngularJS中，指令是扩展HTML能力的关键，它们可以创建新的HTML元素、属性，...
在Angular.js中，自定义指令是扩展框架功能和创建可重用组件的关键特性。通过自定义指令，开发者能够创建自己的HTML元素或属性，这些元素和属性具有特定的行为和交互。以下将详细介绍Angular.js自定义指令的创建过程...
- **14.1 模块和服务的概念与关系**：AngularJS中模块是服务、指令、过滤器等的容器，而服务则是封装特定功能的对象。 - **14.2 定义模块**：开发者可以创建自定义模块来组织相关的服务、指令和控制器。 - **14.3 ...
Angular的指令允许我们在DOM元素、属性、类或者注释中定义行为，进而实现组件化。本文将深入探讨Angular指令的基本使用及其在实际开发中的应用。 首先，指令的创建是通过调用`angular.module().directive()`方法...
最后，我们打印出一些日志，以验证作用域和复制的元素之间的关系。`scope.childHead.number` 和 `scope.childTail.number` 分别表示第一个和最后一个复制元素的`number`属性值，这展示了所有副本都是属于同一个父...
在AngularJS中，$compileProvider是Angular的核心服务之一，它负责处理和编译HTML模板，将其转换成可以与Angular应用程序交互的动态视图。本文将深入解析$compileProvider的使用和功能。 一、方法概览 1. `...
#Frontend开发人员面试问题... 告诉我有关您在Angular中遇到状态问题的时间 您是否曾经在Angular中遇到过性能问题？ 你是如何解决他们的？ 您喜欢Angular吗？ 您对Angular有什么不满意的地方？ 为什么要使用q Promis
他曾在Devoxx UK和其他活动中发表过有关AngularJS的演讲，并开办过AngularJS的培训课程。他希望帮助企业更好地利用AngularJS。 目录 序1 第1章Angular之禅7 11邂逅AngularJS7 熟悉框架8 参与AngularJS项目8 ...