Обработчик события установки ошибки на элементе bootstrap-switch с AngularJS

Question

Итак, в контексте у меня есть переключатель в моем угловом приложении, который вызывает раскрывающееся меню. Я пытаюсь подключить прослушиватель событий, который отменит запрос AJAX на сервер и заполнит раскрывающийся список ответом. Я использую функцию углового бутстрапа-select/bootstrap-select для коммутатора.

Мой первоначальный подход был просто добавить директиву нг-щелчок на DIV вокруг кнопки, которая работает, но запрос посылается только если пользователь нажимает на белую часть кнопки:

изображение кнопка: http://imgur.com/YBOT6x1

Однако клик не регистрируется, если пользователь нажимает на серое место, где он читает «Все». Я также попробовал обернуть 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'"> 

И кучу вариаций этого не имели успеха , Я довольно новичок в угловой, поэтому я не уверен, что я собираюсь сделать это неправильно или нет. Спасибо заранее за любые предложения!

Answer 1

Если вы хотите, чтобы сделать вызов Ajax, когда изменение переход от "Custom" к "All":

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>