AngularJS中寫一個包裹HTML元素的directive

Darren Ji發表於2016-02-03
AngularJSHTML

 

有這樣的一個場景，這裡有一個表單：

<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。

相關文章