使用AngularJS在bootstrap-switch元素上设置事件处理程序时遇到问题

Question

上下文是我的角度应用程序中有一个单选按钮，它触发一个下拉菜单出现。 我正在尝试将事件侦听器附加到服务器上，以将AJAX请求触发并用响应填充下拉列表。 我正在为交换机使用angular-bootstrap-select / bootstrap-select。

我的最初方法是简单地向按钮周围的div添加ng-click指令，此方法有效，但仅当用户单击按钮的白色部分时才发送请求：

按钮图片：

但是，如果用户单击显示为“全部”的灰色部分，则该单击不会注册。 我还尝试将div包裹在锚中，然后将ng-click附加到该锚上，但这也不起作用。

我也尝试使用文档中的方法： bootstrap-switch-event

我的代码：

    $('input[id="mySwitch"]').on('switchChange.bootstrapSwitch', function(event, state) {
    console.log('event triggered');
    if ( !itemsCalled ) {
        myService.items.get().$promise.then(function(response) {
            $scope.itemList = response.items;
        });
        itemsCalled = true;
    }
});

模板：

<input bs-switch id="mySwitch" ng-model="item" type="radio" switch-on-text="All" switch-off-text="Custom" switch-on-color="grey" switch-off-color="blue" switch-animate="true" switch-size="small" ng-value="'All'" ng-true-value="'All'" ng-false-value="'Custom'">

而且，这方面的许多变化都没有成功。 我对angular非常陌生，所以我不确定是否要以错误的方式进行操作。

Answer 1

如果您希望在将开关从"Custom"更改为"All"时进行Ajax调用：

 function Controller($scope) { $scope.$watch('item', function(newValue, oldValue){ if(newValue === "All") { // Ajax call alert("ajax"); } }) } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app ng-controller="Controller"> <input ng-model="item" type="radio" ng-value="'All'" ng-true-value="'All'" ng-false-value="'Custom'"> <button ng-click="item = 'Custom'">Reset</button> </div>