AngularJs 指令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>

 运行结果
AngularJs 指令directive之transclude
 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>

相关推荐