直接上代码
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`的...
Web应 中， Angular让我们可以通过DI来创建像Controllers和Directives这样的对象. 我们还可以创 建 的依赖对象, 当我们要实 化它们时, Angular能 动实现注 。 3. compile和link的区别: 编译的时候，compile转换dom，...
通过这种方式，你可以轻松地在Angular应用中实现图片预览功能，同时保持代码的整洁和模块化。 总结来说，Angular中封装fancyBox涉及的主要步骤包括： 1. 获取fancyBox的最新版本并引入相关文件。 2. 在Angular项目...
Angular ng-click 防止重复提交实例是一个常见的问题，在 Angular 应用程序中，如果用户在短时间内多次点击按钮，可能会导致重复提交数据，从而影响应用程序的稳定性和性能。为了解决这个问题，本文将介绍两种方法来...
在本文中，我们将深入探讨如何基于Angular实现一个三级联动的生日插件。Angular是一个流行的JavaScript框架，用于构建单页面应用程序（SPA）。这个生日插件旨在提供一个用户友好的界面，让用户选择他们的生日，通过...
在Angular.js中，指令是构建可复用组件和复杂用户界面的核心工具。它们允许开发者扩展HTML，赋予HTML新的语义，以实现动态行为和数据绑定。这篇教程将深入讲解Angular.js指令的一些重要属性，帮助你更好地理解和应用...
在Angular.js中，自定义指令是扩展框架功能和创建可重用组件的关键特性。通过自定义指令，开发者能够创建自己的HTML元素或属性，这些元素和属性具有特定的行为和交互。以下将详细介绍Angular.js自定义指令的创建过程...
最后，我们打印出一些日志，以验证作用域和复制的元素之间的关系。`scope.childHead.number` 和 `scope.childTail.number` 分别表示第一个和最后一个复制元素的`number`属性值，这展示了所有副本都是属于同一个父...
本篇文章将深入探讨Angular1.x中的复杂指令，包括它们的创建、使用方式以及相关概念。 1. **指令的创建与使用** 指令通过`.directive()`工厂方法创建，它返回一个对象，该对象包含了描述指令行为的配置。例如，`...
在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 ...
指令还支持多种其他高级用法，如`transclude`（包含内容），`require`（依赖其他指令），以及`compile`和`postLink`链接函数等。 总的来说，AngularJS的Directive提供了一种强大的方式来组织和复用代码，使得HTML...
在AngularJS中，自定义指令是扩展框架功能的关键机制，允许开发者创建可重用的UI组件和行为。本文将深入探讨如何创建和使用自定义指令，以及如何利用它实现分页功能。 首先，创建自定义指令是通过调用`angular....
├最新AngularJS开发宝典—第016讲 ng-init与ng-trim及表单中表单value与$scope数据提交差异分析.mp4 ├最新AngularJS开发宝典—第017讲 使用ng-if、ng-show、ng-disabled、ng-init超简单实现网站注册协议设置.mp4 ...
`link`函数用于在指令元素编译和连接到DOM时执行，而`controller`函数则创建了一个控制器，可以用于多个指令之间的通信。 接下来，我们将讨论指令配置项中的关键属性： 1. `scope`: 这个选项决定了指令如何创建和...
在这里，我们可以访问到元素、属性、控制器和scope，从而实现指令的具体功能。 4. 使用指令：在HTML中，通过`ng-directive`或者自定义的属性、元素或类名来引用我们创建的指令。 `utilDirectives-master`文件夹很...
通过这种方式，`collapsibleDirective`使我们能够轻松地在应用程序中创建可折叠的块元素，提高用户界面的交互性和可读性。此外，这种自定义指令的设计模式可以扩展到更复杂的交互，如嵌套的折叠面板、动画效果等，只...
- **缓存和复用**：利用`transclude`和`template`选项来缓存指令模板，减少重复编译和链接。 - **避免深度级联**：尽量减少指令嵌套，因为每一层都会增加作用域层级和执行时间。 3. **可衡量的指令** - **性能...