AngularJS指令之replace和transclude

Replace说明

顾名思义,就是替换嘛,在大多数的情况下,元素是可以嵌套的。我们先看一个简单的代码:

html:

<!doctype html>
<html ng-app="MyModule">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <hello>
            <div>这里是指令内部的内容。</div>
        </hello>
    </body>
    <script src="framework/angular-1.3.0.14/angular.js"></script>
    <script src="replace.js"></script>
</html>

js:

var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
    return {
        restrict:"AE",
        template:"<div>Hello everyone!</div>",
        replace:true
    } 
});

其中,指令中的<div>这里是指令内部的内容。</div>将会被替换,这个没啥好说的,我们看transclude.

transclude说明

transclude表示变换,现在呢,我们希望<div>这里是指令内部的内容。</div>也显示出来,我们还是先看代码:

<!doctype html>
<html ng-app="MyModule">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <hello>
            <div>这里是指令内部的内容。</div>
        </hello>
    </body>
    <script src="framework/angular-1.3.0.14/angular.js"></script>
    <script src="transclude.js"></script>
</html>

<script>
var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
    return {
        restrict:"AE",
        transclude:true,
        template:"<div>Hello everyone!<div ng-transclude></div></div>"
    } 
});
</script>

打开html,显示结果:

Hello everyone!
这里是指令内部的内容。

我们通过增加了2个:

  1. 增加了一个配置项transclude:true
  2. 然后我们在模板里面定了一个div,增加了<div ng-transclude></div>,此配置告诉AngularJS,把嵌套的内容,放到这里。






发表于: 21天前   最后更新时间: 21天前   游览量:76
上一条: AngularJS指令之$templateCache
下一条: AngularJS指令之compile和link

评论…


  • 评论…
    • in this conversation