AngularJs 指令directive之transclude

最新推荐文章于 2021-06-21 15:38:45 发布

原创最新推荐文章于 2021-06-21 15:38:45 发布 · 123 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

javascript 专栏收录该内容

70 篇文章

订阅专栏

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

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>