12

予期しない Angular の動作に遭遇しました。この投稿の目的は、これがバグなのか意図されたものなのか、そして意図された理由を説明することです。

まず、この Plunkr を参照してください: http://plnkr.co/edit/CB7k9r?p=preview。この例では、3 つのオブジェクト エントリを持つ array という配列を作成しました。さらに、入力フィールド (トグルと呼ばれる) の内容に基づいて ng-switch を作成しました。toggle の値が 1 の場合、配列内のオブジェクトのすべての名前を "1" で始まるか、それ以外の場合は "other" で始まるように出力する必要があります。

これは意図したとおりに機能せず、エラーが表示されます。

Error: Argument '?' is required at assertArg

ただし、同じ例を書き直して ( http://plnkr.co/edit/68Mfux?p=preview )、リストの周りに追加の div を追加し、ng-switch をこの div に移動し、ng-switch-when を li から に移動しました。 ul (ng-repeat と ng-switch-when を分離する) は意図したとおりに機能します。

誰かがこれがなぜなのか説明できますか?

4

1 に答える 1

18

angularがng-repeatを処理する方法の製品であるため、これは「意図的」です。基本的に、マークアップの複数のコピーが複製され (ng-repeat 内のマークアップがテンプレートとして使用されます)、反復する要素ごとに個別にコンパイルされます。そのため、 angular は基本的に 3<li ng-switch-when='1' ....>と 3をコンパイル<li ng-switch-default ....>していますが、コンテキスト外でコンパイルしています-比較する ng-switch-on 要素はありません。

結果のマークアップを調べると、これが起こっていることがわかります。

<ul ng-switch="" on="toggle">  
  <!-- ngRepeat: entry in array -->
  <!-- ngSwitchWhen: 1 -->
  <!-- ngSwitchWhen: 1 -->
  <!-- ngSwitchWhen: 1 -->
  <!-- ngRepeat: entry in array -->
  <!-- ngSwitchDefault:  -->
  <!-- ngSwitchDefault:  -->
  <!-- ngSwitchDefault:  -->        
</ul>

両方のディレクティブ (ng-repeat と ng-switch) は、(たとえば、ng-show や ng-hide とは異なり) 構造に大きく影響するため、注意して取り扱う必要があります。2番目の（動作する）Plunkerは、ng-switchロジックの後で（構造的にはINSIDE）ディレクティブでのみ動作します。

于 2013-03-15T13:46:55.453 に答える