Question

我正在使用基于引导开关的复选框开关（文档：https://tictail.com/developers/documentation/uikit/#Switches）。

我想在元素上使用ng-show，就像这里的例子一样： 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

您必须在ng-app中嵌套代码，以便它知道它是一个有角度的应用程序。

    <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/

Answer 2

请记住，我对Angular很新，所以这可能不是最佳答案。

我认为Switch插件正在做的是阻止复选框上的值（或传播到角度）。

我认为你可以做的是你的指令，绑定到change事件，并使用指令上的isolate范围与控制器中的变量进行双向绑定。

HTML：

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

switch-variable将使用指令

进行双向绑定

指令：

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
                });
            }
        }
    });

编辑：

根据您的第一条评论，您可以尝试将指令事件更改为：

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
});

ng-show不适用于复选框切换

2 个答案: