Angular-toggle-switch 如何检测更改/点击？

Question

我是 Angular 新手，尝试使用 CGARVIS 设计的 Angular-toggle-switch：http://cgarvis.github.io/angular-toggle-switch。不幸的是，没有很多文档，并且像 ng-click 等“正常”的 Angular 选项不起作用。

我已经设法根据 JSON 对象中是否存在某个值来设置切换按钮的初始值：

    <div ng-repeat="agendapunt in aktieveVergadering.Agendapunten | orderBy:'VolgNr'" ng-init="search(agendapunt.AgendapuntCollegelid)">
        <ul class="list-group">
            <li class="list-group-item">

                <table class="table-condensed apunttable">
                    <tr>
                        <td class="apuntvolgnr"><span class="badge pull-left">{{agendapunt.VolgNr}}</span></td>
                        <td class="apuntomschrijving">{{agendapunt.Omschrijving}}</td>
                        <td class="apuntkeuze"><toggle-switch model="Bespreken" on-label="Ja" off-label="Nee"  /></td>
                    </tr>
                </table>
            </li>
        </ul>
    </div>

初始真/假的设置由这个函数完成：

$scope.search = function (array) {
    this.Bespreken = false;
    for (var i = 0; i < array.length; i++) {
        if (array[i].Volledigenaam == $scope.VolledigeNaam)
            this.Bespreken = true;
            return;
    }
    return;
};

现在这给了我一个带有 listitems 的页面，每个页面都有一个设置为正确初始值的切换按钮。但是：

-如何检测每个单独按钮的更改（或点击事件）？

-为什么我不能像 $scope.Bespreken 这样以 Angular 方式引用“Bespreken”值？

• 在哪里可以找到有关使用 Angular-toggle-switch 的更多信息/示例？

Answer 1

尝试像这样在切换开关中添加 on-change：

<toggle-switch
  model="switchStatus"
  on-label="Hide"
  off-label="Show"
  on-change="switchFilters()">
<toggle-switch>

比在你的控制器中：

switchFilters = function (){
 // Do whatever u want to do
}

但在所有这些之前将其添加到模块中

var app= angular.module('app', ['toggle-switch']);

Answer 2

你正在使用

<toggle-switch model="Bespreken"... ></toggle-switch>

应该是

<toggle-switch ng-model="Bespreken"... ></toggle-switch>

我已经通过这种方式使用 ng-click 解决了范围的一些问题：

<toggle-switch 
  ng-model="Bespreken" 
  ng-click="switch(Bespreken)" 
  on-label="Ja"
  off-label="Nee">
</toggle-switch>

希望对你有帮助

Answer 3

您可以使用 watchCollection 自动检测模型的变化。

$scope.$watchCollection('switchStatus', function() { ... });

Answer 4

对于任何可能遇到此问题的人，我最终将 on-change 添加到指令范围，以便我可以使用 Sensei 答案中的语法。在 angular-toggle-switch.js 文件中只需要几行代码，它似乎工作正常。 免责声明：我对 Angular 有点陌生，所以这可能不是理想的方法。

scope: {
    disabled: '@',
    onLabel: '@',
    offLabel: '@',
    knobLabel: '@',
    change: '&onChange'   //Allows us to bind to a function call
},
...
...
...
link: function(scope, element, attrs, ngModelCtrl) {
    ...
    ...
    ...
    scope.toggle = function toggle() {
        if (isEnabled) {
            scope.model = !scope.model;
            ngModelCtrl.$setViewValue(scope.model);
            scope.change();   //After updating the value, execute the callback
        }
    }
}