如何完成編譯元素，如果指令設置terminal：true？

代碼是here。如何完成編譯元素，如果指令設置terminal：true？

我想創建一個指令，重新安排它的子元素。我不能使用簡單的ng-transclude，因爲我想將一些子元素放在模板中的不同位置。我已經瞭解到，我需要設置terminal: true並自己控制編譯，但是您怎麼做？正如你在代碼中看到的那樣，子元素上的ng-if和ng-model已經被編譯，但是不能正常工作。

我可能會做錯的一個具體事情：$compile函數的第二個參數。我不知道它是什麼，以及documentation，除了「可用於指令的功能」之外沒有其他說法。

這裏是有問題的指令：

.directive('controlGroup', function ($compile, $log) { 
    var template = "<div class='control-group'>" + 
        "<label class='control-label'></label>" + 
        "<div class='controls'></div>" + 
        "</div>"; 
    return { 
    restrict: 'A', 
    terminal: true, 
    priority: 100, 
    compile: function (elt, attrs) { 
     // Re-arrange element, inserting parts into template from above. 
     var labelText = elt.find('label').text(); 
     var inputsAndMessages = elt.children().filter('input, button, select, .text-error'); 
     var newElt = $(template); 
     newElt.find('.control-label').text(labelText); 
     newElt.find('.controls').append(inputsAndMessages); 
     elt.html('').append(newElt); 

     // Now, how to finish compiling and linking it? What to pass for 2nd arg? 
     var link_ = $compile(elt, null, 99); 

     function link (scope, elt, attrs) { 
     } 
     return link; 
    } 
    }; 
})

來源

2013-12-17 Rob N

此行var link_ = $compile(elt, null, 99);返回一個模板函數。 $compile docs：

編譯一張HTML字符串或DOM的成模板，併產生一個模板函數，那麼其可用於鏈接的範圍和模板一起。

現在你只需要對範圍執行該模板。由於有在編譯時沒有範圍，我們需要做的是在你的鏈接功能，像這樣：

function link (scope, elt, attrs) { 
    link_(scope); 
}

修復它：Working plunker

的第二個參數是會給你訪問一個transclusion功能克隆的元素和範圍，如果你transcluding。既然你不包括，那麼null就可以通過。

來源

2013-12-17 22:09:43 KayakDave

如何完成編譯元素，如果指令設置terminal：true？

回答

相關問題