angularjs - 引导开关和 ng-model

Question

我在我的应用程序中使用 angular 和 bootstrap-switch 插件。它是这样工作的：

<input type="checkbox" name="my-checkbox" checked>
<script>$("[name='my-checkbox']").bootstrapSwitch("size", "small");</script>

问题是，如果我想使用在那里找到的所有属性，它就不起作用。

如何在我的交换机上使用 ng-model？我想这样使用它：

<input type="checkbox" name="my-checkbox" checked="variableStatus" data-on-color="success" data-off-color="warning">
or
<input type="checkbox" name="my-checkbox" ng-model="variableStatus" data-on-color="success" data-off-color="warning">

Answer 1

它不起作用的最明显原因是 bootstrap-switch 是一个 jQuery 库。Angular 不能很好地与 jQuery 配合使用，所以如果你想使用它，你必须编写自己的指令。但是，以下链接将为您提供某人编写的指令，称为 angular-bootstrap-switch。你可能想检查一下。

https://github.com/frapontillo/angular-bootstrap-switch

Answer 2

Bootstrap 有特殊的启动方法，如果要启动它，请尝试在 angularjs 中的一段时间后启动。

setTimeout(installSwitcher, 1000);

function installSwitcher(){
   $("[name='my-checkbox']").bootstrapSwitch();
}

<input type="checkbox" name="my-checkbox" checked>