AngularJs 指令directive之transclude

最新推荐文章于 2024-08-11 20:00:32 发布

weixin_33777877

最新推荐文章于 2024-08-11 20:00:32 发布

阅读量108

点赞数

文章标签： java javascript ViewUI

原文链接：https://yq.aliyun.com/articles/43302

版权

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

先看例子，index.JS代码：

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

html

     Java代码   
     
   
<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再看页面代码变成了

     Java代码   
     
   
<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>  

weixin_33777877

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJs 指令directive之transclude

transclude - 编译元素的内容，使它能够被directive所用。需要(在模版中)配合ngTransclude使用(引用)先看例子，index.JS代码：Java代码varappModule=angular.module('app',[]);appModule.directive('hello',functi...
复制链接

扫一扫