AngularJS：編譯與模板

Question

我對Angular仍然很陌生，有很多做事的方式，所以很難弄清楚如何做最好的事情。總之，我試圖在Angular中創建一個指令，該指令有條件地呈現輸入[type =「text」]或textarea。在我templateUrl我最初做這個：

<div class="row"> 
    <label ng-if="label" for="{{inputId}}" class="input-label">{{label}}</label> 
    <input ng-if="inputType !== 'textarea'" id="{{inputId}}" type="text" class="input" ng-model="$parent.model"> 
    <textarea ng-if="inputType === 'textarea'" id="{{inputId}}" class="input" ng-model="$parent.model"></textarea> 
</div> 

但是，這創造了很多的問題，因爲你可以看到，我不得不使用$ parent.model這感覺混亂。此外，輸入/ textarea還沒有在我的鏈接功能，除非我做了一個醜陋的$超時（然後傳播異步問題到我的單元測試）。然後，我決定改變NG-如果對NG-顯示：

<div class="row"> 
    <label ng-if="label" for="{{inputId}}" class="input-label">{{label}}</label> 
    <input ng-show="inputType !== 'textarea'" id="{{inputId}}" type="text" class="input" ng-model="model"> 
    <textarea ng-show="inputType === 'textarea'" id="{{inputId}}" class="input" ng-model="model"></textarea> 
</div> 

這主要是不錯，但我並不想再爲每一個指令，我呈現一個隱藏的文本區域/輸入。它只是感覺不對。我目前使用的編譯功能，有條件地創建輸入/ textarea的想法醞釀和標籤後，將其插入：

<div class="row"> 
    <label ng-if="label" for="{{inputId}}" class="input-label">{{label}}</label> 
</div> 

然後在我的指令（對不起，CoffeeScript的仇敵）：

compile: (tElem, tAttrs) -> 
    inputId = tAttrs.inputId 
    if tAttrs.inputType is 'textArea' 
    html = "<input id=\"#{inputId}\" type=\"text\" class=\"input\" ng-model=\"model\">" 
    else 
    html = "<textarea id=\"#{inputId}\" class=\"input\" ng-model=\"model\"></textarea>" 
    tElem.find('label').after(angular.element(html)) 

我對這種方法也很批評，因爲我基本上把我的模板分成了兩個不同的地方，並且可能會弄糊塗，試圖弄清楚東西來自哪裏。我打算插入一個虛擬元素並將其替換爲編譯函數。

是否有一種方法在所有其他方面突出？我的想法有什麼根本錯誤？謝謝！

Answer 1

您可以使用模板作爲一個功能來產生模板：

app.directive 'myDirective' ,()-> 
    template: (tElem, tAttrs)-> 
    if tAttrs.inputType is 'textArea' 
     """ 
     <div class="row"> 
     <label ng-if="label" for="{{inputId}}" class="input-label">{{label}}</label> 
     <input id="{{inputId}}" type="text" class="input" ng-model="model"> 
     """ 
    else 
     """  
     <div class="row"> 
     <label ng-if="label" for="{{inputId}}" class="input-label">{{label}}</label> 
     <textarea id="{{inputId}}" class="input" ng-model="model"></textarea> 
     </div> 
     """