2

ng-switchモデルが更新されても、何らかの理由でビューが切り替わらないという問題があります。それは常にデフォルトのビューを表示します（これはテストのためだけにあります）、ここでテストされているようにすべてが完全なhtmlで正常に動作するはずですhttp://plnkr.co/edit/fKlPKy?p=previewだから私はそれが翡翠からだと思います：

    .btn-group(data-toggle='buttons-radio', style='float:right; margin-right:20px;')
      .btn(ng-model='displayType', btn-radio="'grid'")
        i.icon-th
      .btn(ng-model='displayType', btn-radio="'list'")
        i.icon-align-justify

  .switch(ng-switch, on='displayType')
    .switch(ng-switch-when='grid')
      include gridView
    .switch(ng-switch-when='list')
      include listView
    pre(ng-switch-default) {{displayType}}

デフォルト ビューでdisplayType、選択したラジオに応じて「グリッド」または「リスト」に正しく更新されていることがわかります

エリアの完全な HTML で更新:

<div ng-controller="cardCtrl" class="container ng-scope">
  <div class="card-list-header">
    <div class="card-search">
      <div align="center" class="input-append">
        <input type="text" ng-model="searchterm" placeholder="Type in filter criteria and press Enter..." ui-keypress="{13:'keypressCallback($event)'}" class="input-xxlarge ng-valid ng-dirty"><span ng-click="addCard()" class="add-on">+</span>
      </div>
    </div>
    <div data-toggle="buttons-radio" style="float:right; margin-right:20px;" class="btn-group">
      <div ng-model="displayType" btn-radio="'grid'" class="btn ng-pristine ng-valid active"><i class="icon-th"></i></div>
      <div ng-model="displayType" btn-radio="'list'" class="btn ng-pristine ng-valid"><i class="icon-align-justify"></i></div>
    </div>
  </div>
  <div ng-switch="ng-switch" on="displayType" class="switch">
    <!-- ngSwitchWhen: grid -->
    <!-- ngSwitchWhen: list -->
    <!-- ngSwitchDefault: ng-switch-default -->
    <pre ng-switch-default="ng-switch-default" class="ng-scope ng-binding">grid</pre>
  </div>
</div>
4

2 に答える 2

5

上記のコメントで説明したように、ng-switch="ng-switch"ng-switch ディレクティブの処理がめちゃくちゃでした。ng-switch="displayType"動作するため、次の Jade 構文が動作するはずです。

.switch(ng-switch='displayType')
于 2013-03-29T16:22:22.583 に答える
1

私は同じ問題を抱えていました-私の最初の修正は、単一の属性として扱われるように.jadeで「ng-switch on」を引用符で囲むことでした-そうでなければ、2つの別々のhtml属性に変換されました. 生産する

<div ng-switch on="displayType" class="switch">

あなたが使うだろう

.switch("ng-switch on"="displayType")

ただし、とにかく on はオプションであるため (ドキュメントのサンプルにそれを含めると誤解を招く可能性があると主張することができます)、より良い方法は、問題のある「on」を完全に (前の回答のように) 省略することです。

.switch(ng-switch="displayType")

この種のことは、オンラインの jade to html ツールを使用してデバッグできます。

于 2015-03-04T16:16:18.717 に答える