`
hudeyong926
  • 浏览: 2015314 次
  • 来自: 武汉
社区版块
存档分类
最新评论

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>

 运行结果

 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>

 

  • 大小: 8 KB
分享到：
| AngularJs 指令directive之require
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics