Angularjs: обновление области $, когда я меняю выбор с помощью jQuery

Я использую плагин jQuery для настройки своих вариантов.

Этот плагин запускает событие изменения исходного выбора, когда выбран какой-либо параметр.

Проблема заключается в том, что моя область действия не изменяется.

Здесь вы можете увидеть быстрый пример... изменение выбора изменений области. нажав кнопки, которые выбирает, а не область.

http://plnkr.co/edit/pYzqeL6jrQdTNkqwF1HG?p=preview

Что мне не хватает?

Ответ 1

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

$('button').on('click', function(){
    var newVal = $(this).data('val');
    $('select').val(newVal).change();

    var scope = angular.element($("select")).scope();
    scope.$apply(function(){
        scope.selectValue = newVal;
    });
});

Ответ 2

Когда вы нажимаете кнопку, angular выходит из своей области и использует jquery для управления данными/для выполнения некоторых действий, поэтому нам нужно явно вызывать $scope. $apply(), чтобы отразить изменения обратно в объем контроллера. И измените свой контроллер на это:

app.controller('AppCtrl', function($scope) {
    $('button').on('click', function(){
        $scope.selectValue=$(this).data('val');
        $scope.$apply();
    });
}

Кстати, вы можете использовать событие jquery внутри angular..

Ответ 3

В идеале в angularJS контроллер не должен напрямую обновлять ссылку DOM. Если вы хотите достичь того же, вы должны разоблачить один метод над $scope и использовать директиву "ng-click".

Если вы хотите добиться того же, используя jQuery, он должен перейти в директиву как

$scope.$apply()

чтобы обновить область.

Ответ 4

Лучше всего не смешивать DOM-манипуляцию с Angular. Попробуйте следующее для вашей кнопки HTML:

<button class="setVal" ng-click="selectValue=1">Set 1</button>
<button class="setVal" ng-click="selectValue=2">Set 2</button>
<button class="setVal" ng-click="selectValue=3">Set 3</button>

Я попробовал выше в вашем Plunker, и это сработало.

Ответ 5

В вашем jQuery поставить автоматический триггер, например

 $('#input').click(function(){
      $('#input').val('1');
      $('#input').trigger('input'); //add this line this will bind $scope Variable
    });