AngularJs 指令directive之transclude

@航空母舰

于 2014-05-30 14:19:01 发布

阅读量108

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/hudeyong926/article/details/99540579

javascript 专栏收录该内容

70 篇文章

订阅专栏

本文详细介绍了Angular中transclude指令的作用及其与directive的配合使用方法，通过具体实例展示了如何将自定义directive与transclude结合，实现元素内容的灵活整合与展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

transclude - 编译元素的内容，使它能够被directive所用。需要(在模版中)配合ngTransclude使用(引用)

先看例子，index.JS代码：

var appModule = angular.module('app', []);
appModule.directive('hello', function() {
    return {
        restrict: 'E',
        template: '<div>Hi there <span ng-transclude></span></div>',
        transclude: true
    };
});

html

<html ng-app='app'>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<hello>
    <br/>
    <span>原始的内容，</span><br/>
    <span>还会在这里。</span>
</hello>
<hello>
</hello>
</body>

<script type="text/javascript" src="../vendor/angular/angular.js"></script>
<script type="text/javascript" src="app/index.js"></script>
</html>

运行结果

firebug再看页面代码变成了

<hello>
<div>Hi there 
<span ng-transclude="">
    <br/>
    <span>原始的内容，</span><br/>
    <span>还会在这里。</span>
</span>
</div>
</hello>
<hello <div="">Hi there 
<span ng-transclude="">
</span>
</hello>