Jade、Angular 和 ngSwitch答案

【问题标题】：Jade, Angular and ngSwitchJade、Angular 和 ngSwitch
【发布时间】：2013-03-29 15:02:51
【问题描述】：

由于某种原因，我在使用 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>

【问题讨论】：

您的 .switch 是否在其他控制器或范围内（可能在另一个 ng-switch 或 ng-repeat 或 ng-include 或其他创建自己的范围内？）
@MarkRajcok 它就在 ng-controller 内，而 ng-controller 本身就在 ng-view 内
ng-view里面的按钮组也是？
@MarkRajcok 是的。我不明白为什么{{displayType}} 更新正确但 ng-swicth 没有触发
看起来你正在混合 Jade 的 switch 和 angular 的 switch...

标签： angularjs pug angular-ui

【解决方案1】：

正如上面 cmets 中所讨论的，ng-switch="ng-switch" 正在搞乱 ng-switch 指令处理。 ng-switch="displayType" 有效，所以这个 Jade 语法应该有效：

.switch(ng-switch='displayType')

【讨论】：

【解决方案2】：

我遇到了同样的问题——我的第一个解决方法是简单地将“ng-switch on”括在 .jade 中的引号中，以便将其视为单个属性——否则它会转换为两个单独的 html 属性。生产

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

你会使用

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

但由于 on 无论如何都是可选的（有人可能会争辩说文档中的示例会误导包含它），更好的方法是完全省略有问题的“on”（如上一个答案），如下所示：

.switch(ng-switch="displayType")

你可以用an online jade to html tool调试这种东西

【讨论】：