ng-show не работает с переключателем флажка

Question

Я использую переключатель флажка, основанный на переключателе начальной загрузки (здесь: https://tictail.com/developers/documentation/uikit/#Switches).

Я хочу использовать нг-шоу на элемент так же, как в примере здесь: https://docs.angularjs.org/api/ng/directive/ngShow

Однако ничего не происходит, когда я нажимаю на коммутаторе (установите флажок привязанную к коммутатору).

Я использовал существующий plunker поставить этот вопрос в правильном контексте: http://embed.plnkr.co/LRSGXqxjtbYcr6rjTj69/

HTML:

<fieldset> 
    <legend>Test switch</legend> 
    <div class="form-group"> 
    <label for="testSwitch">Test switch</label><br> 
    <div class="switch" init-switch> 
     <input type="checkbox" ng-model="testSwitch"> 
    </div> 
    </div> 
</fieldset> 

<fieldset ng-show="testSwitch"> 
... 

Спасибо!

Answer 1

Пожалуйста, имейте в виду, что я новичок в Угловое так что это не может быть лучшим ответом.

Я думаю, что независимо от того, что делает плагин Switch, это предотвращает изменение значения на флажке (или распространяется на угловое).

Я думаю, что вы можете сделать это по вашей директиве, связать что-то с событием изменения и использовать область выделения в директиве, чтобы сделать двустороннюю привязку к переменной из элемента управления.

HTML:

<div class="switch" init-switch switch-variable="testSwitch"> 
    <input type="checkbox" id="check"> 
</div> 

Переключатель переменным будет делать 2-полосные связывания с директивой

Директива:

app.directive('initSwitch', function() { 
     return { 
      scope: { 
       switchVariable: '=' //this is how you define 2way binding with whatever is passed on the switch-variable attribute 
      }, 
      link: function (scope, element, attr) { 
       scope.$evalAsync(function() { 
        element.switch(); 
       }); 

       element.on("change", function(){ 
        if(scope.switchVariable) 
        scope.switchVariable = !scope.switchVariable 
        else 
        scope.switchVariable = true; 

        scope.$apply(); //I believe you need this to propagate the changes 
       }); 
      } 
     } 
    }); 

---

Edit:

Согласно вашему первому комментарий, вы можете попытаться изменить событие директивы для:

element.on("change", function(){ 
    if(element.children('.switch-off')[0]) //Looking for the class that determines to what side the switch is 
    scope.switchVariable = false; 
    else 
    scope.switchVariable = true; 
    scope.$apply(); //I believe you need this to propagate the changes 
}); 

Что касается второго пункта, если вы установите флажок установлен, то нуждается в вашей функции ссылку, чтобы узнать состояние чекбокса:

scope.$evalAsync(function() { 
    scope.switchVariable = element.children()[0].checked; //check if checkbox is checked (before the plugin changes the DOM 

    element.switch(); //initialize the plugin 
}); 

Answer 2

Вы должны ввести свой код в ng-приложение, чтобы он знал, что это угловое приложение.

<div ng-app="myApp"> 
     <fieldset> 
      <legend>Test switch</legend> 
      <div class="form-group" > 
       <label for="testSwitch">Test switch</label><br> 
       <div class="switch"> 
        <input type="checkbox" ng-model="testSwitch"/> 
       </div> 
      </div> 
     </fieldset> 
     <h1 ng-show="testSwitch">Now you see me</h1> 
    </div> 

http://jsfiddle.net/df1gz8jk/1/