Jade, Angular и ngSwitch

Question

У меня проблема с использованием 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> 

Answer 1

Как обсуждалось в комментариях выше, ng-switch="ng-switch" бездельничал U p ng-switch. ng-switch="displayType" работы, так что этот синтаксис Jade должен работать:

.switch(ng-switch='displayType') 

Answer 2

У меня была такая же проблема - мой первый исправление было просто вложить в «нг-переключатель» в кавычках в .jade так, что она рассматривается как один атрибут - в противном случае он переводится в два отдельных атрибута html. Для получения

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

Вы бы использовать

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

, но так как на не является обязательным в любом случае (можно было бы утверждать образец в документации вводит в заблуждение, чтобы включить его), то лучше было бы, чтобы опустить проблематичным «на» полностью (как и предыдущий ответ) вот так:

.switch(ng-switch="displayType") 

Вы можете отлаживать такие вещи с an online jade to html tool