AngularJS中写一个包裹HTML元素的directive

 

有这样的一个场景，这里有一个表单：

<form role="form">
    ...
</form>

我们希望在form的外层动态包裹上一层。

有可能是这样：

<div id="well">
    <form role="form">
    ...
    </form>
</div>

也有可能是这样：

<div id="red">
    <form role="form">
    ...
    </form>
</div>

动态的div放在那里呢？

--放在<script id="well" type="text/ng-template"></script>和<script id="red" type="text/ng-template"></script>里面，就像如下：

<script id="well" type="text/ng-template">
    <div class="well"></div>
</script>

<script id="red" type="text/ng-template">
    <div style="color:red"></div>
</script>

 

动态div如何包裹到form上呢？

--通过<form role="form" wrap-with="red">或<form role="well" wrap-with="red">

所以我们要写一个名称为wrapWith的directive.

 

var app = angular.module("app",[]);

app.controller("AppCtrl", function(){
    var app = this;
    app.people = [
        {"firstName":"", "lastName":""},
        ...
    ];
});

app.directive("wrapWith", function($templateCache){
    return {
        transclude: 'element',
        link: function(scope, element, attrs, ctrl, transclude){
            //获取模版内容
            var template = $templateCache.get(attrs.wrapWith);
            //把模版内容转换成angular元素
            var templateElement = angular.element(template);
            
            transclude(scope, function(clone){
                //clone,在这里是表单form
                element.after(templateElement.append(clone));
            })
        }
    }
})

以上，通过$templateCache可以获取到<script id="well" type="text/ng-template"></script>中的内容，然后通过angular.element转换成angular元素，最后使用link函数的transclude把form追加到模版后面。另外，transclude的属性值要设置成element。