AngularJS多元素指令

Question

AngularJS支持帶-start和-end后綴的多元素指令。 官方文檔僅提到ng-repeat-start和ng-repeat-end 。 其他內置指令是否支持此功能？

例如，這工作正常：

<tbody>
  <tr ng-controller="myController">
    <td>{{firstName}}</td>
    <td>{{lastName}}</td>
  </tr>
</tbody>

{{firstName}}和{{lastName}}替換為正確的值。

但這只能部分起作用：

<tbody>
  <tr ng-controller-start="myController">
    <td>{{firstName}}</td>
  </tr>
  <tr ng-controller-end>
    <td>{{lastName}}</td>
  </tr>
</tbody>

{{firstName}}已正確替換。 但{{lastName}}為空。 由於{{firstName}}有效，因此AngularJS可以識別ng-controller-start 。 它是一個錯誤，或者我做錯了， {{lastName}}不起作用？

更新如果ng-controller-start和ng-controller-end未得到官方支持。 如何使ng-controller跨越多個元素？ 我可以使用comment-style指令嗎？ 如果有，怎么樣？

Answer 1

指令是否支持此指令是基於其指令定義和multiElement屬性。

看起來Angular的文檔似乎沒有說哪個內置指令是多元素的，但Github搜索似乎表明它只有ngRepeat ， ngSwitchWhen ， ngSwitchDefault ， ngIf ， ngShow和ngHide 。

您也可以使用multiElement創建自己的指令。

Answer 2

在Angular 1.2中

使用Angular 1.2，引入了對多元素指令的支持。 看起來他們想到的具體用例是ngRepeat，因為據我所知，它沒有被提升為與任何其他內置指令一起使用。 但是，使用ngRepeat，它解決了一個非常特殊的問題，例如如何為每個項重復多個表行。

在1.2中， $compile服務將檢測任何帶有-start后綴的指令，並假設它是一對多元素指令屬性（ source ）之一。 這導致了不良的副作用，你無法將你的指令命名something-start ，因為$compile服務在找不到多元素對應時會感到困惑。

這會導致錯誤： Error: [$compile:uterdir] Unterminated attribute, found 'something-start' but no matching 'something-end' found.

$compile服務不分青紅皂白地將指令視為多元素，這就是為什么你能夠在Angular 1.2中使用ng-controller-start和ng-controller-end 。 但是，ngController指令並不是為處理多個元素而設計的，這就是它無法按預期工作的原因。 它將作用於范圍中的第一個元素，並忽略其余元素 - 正如您所觀察到的那樣。

在Angular 1.3中

Angular 1.3通過在指令定義對象上使用新的multiElement: true屬性要求顯式定義任何多元素指令來解決上述問題。 請參閱相關文檔

這意味着ng-controller-start將不會在1.3中執行任何操作 ，因為它將導致編譯器查找名為“ngControllerStart”的指令，該指令不存在。 因此，指令屬性將被忽略。

正如另一個答案所指出的，您現在可以在angular.js GitHub repo中搜索“multiElement”，以查看支持此功能的特定核心指令。