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个：

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

AngularJS指令之replace和transclude

Replace说明

transclude说明

昵称