复选框切换没有收听

时间:2014-09-24 13:24:54

标签: angularjs

我在AngularJS应用中使用了复选框开关。它们依赖于jQuery,显然不适合Angular,但是我被迫使用它们所包含的UIKit。

感谢本网站上的人们的帮助,我找到了一个半工作的解决方案,但仍然缺少一些东西让开关听取实际复选框的当前值。

我在一个现有的plunker中举了一个例子。您可以在" Contact& amp;帮助" (help.html)和控制器名称是HelpController。

我现在要做的是将复选框/开关的值设置为" true"来自JS,所以我可以从数据库加载checkbox / switch的保存状态。

关于如何解决它的任何想法?谢谢!

Plunker: http://embed.plnkr.co/LRSGXqxjtbYcr6rjTj69/

1 个答案:

答案 0 :(得分:1)

一些评论:

在您的控制器上,您将获得复选框的初始设置:

app.controller('HelpController', function ($scope) {

   $scope.theCheckbox = true; //in here you would set theCheckbox variable from your DB

   ....

 });

然后将初始值传递给指令,注意属性名称switch-variable(它将是指令上的Camel案例):

<div class="switch" init-switch switch-variable="theCheckbox">
  <input type="checkbox" id="active" name="active">
</div>

最后是指令:

 scope.$evalAsync(function () {
   element.switch(); //initialize the plugin
   if(scope.switchVariable)
      element.switch("toggleState");
 });