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。