angularjs: aktualizacja zakresu $ po zmianie zaznaczenia za pomocą jQuery

Question

Używam wtyczki jQuery do "dostosowywania" moich zaznaczeń.

Ta wtyczka uruchamia zdarzenie zmiany oryginalnego wyboru, gdy wybrana jest opcja.

Problem polega na tym, że mój zasięg się nie zmienia.

Tutaj można zobaczyć szybki przykład ... Zmiana wyboru zakresu zmian. klikając przyciski wybierz zmiany, ale nie zakres.

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

Czego mi brakuje?

Answer 1

Najlepiej nie mieszać manipulacji DOM z Angular. Spróbuj dla przycisku 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> 

Próbowałem powyższego w twoim Plunkerze i działało.

Answer 2

Trzeba wejść do zakresu listy rozwijanej, a następnie zastosować je w sposób pokazany poniżej:

$('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; 
    }); 
}); 

Answer 3

Po kliknięciu przycisku kątowy wychodzi jej zakres i używa jQuery do manipulowania danymi /, aby wykonać niektóre działania, więc musimy wywołać $ scope. $ apply(), aby odzwierciedlić zmiany z powrotem w zakresie kontrolera. I zmienić swój kontroler do tego:

przy okazji można wykorzystać zdarzenie jquery wewnątrz kątowa ..

Answer 4

Idealnie w angularjs, kontroler nie powinien zaktualizować odniesienie DOM bezpośrednio. Jeśli chcesz osiągnąć to samo, powinieneś ujawnić jedną metodę za pomocą $ scope i użyć dyrektywy "ng-click".

Jeśli chcesz osiągnąć to samo przy użyciu jQuery, należy przejść do dyrektywy jako

$scope.$apply() 

zaktualizować zakresu.

Answer 5

W swojej jQuery postawić auto spust np

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