web-dev-qa-db-fra.com

angularjs: mise à jour de $ scope lorsque je change de sélection avec jQuery

J'utilise un plugin jQuery pour "personnaliser" mes sélections.

Ce plugin déclenche l'événement de modification de la sélection d'origine lorsqu'une option est sélectionnée.

Le problème est que ma portée ne change pas.

Ici vous pouvez voir un exemple rapide ... changer la sélection change la portée. en cliquant sur les boutons, la sélection change mais pas la portée.

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

Qu'est-ce que je rate?

angularjsangularjs-scope
11
user2071887

Vous devez accéder à la portée du menu déroulant, puis l'appliquer comme indiqué ci-dessous: 

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

Lorsque vous cliquez sur le bouton, angular sort de sa portée et utilise jquery pour manipuler les données/pour effectuer une action. Nous devons donc appeler explicitement $ scope. $ Apply () pour refléter les modifications apportées à la portée du contrôleur. Et changez votre contrôleur pour ceci:

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

En passant, vous pouvez utiliser jquery event dans le cadre angulaire.

11
Vidhya Sagar Reddy

Idéalement dans angularJS, le contrôleur ne devrait pas mettre à jour directement la référence DOM. Si vous voulez obtenir le même résultat, vous devez exposer une méthode sur $ scope et utiliser la directive "ng-click". 

Si vous voulez atteindre le même résultat avec jQuery, vous devez entrer la directive

$scope.$apply()

pour mettre à jour la portée.

3
Vishnudas Tekale Kulkarni

Il est préférable de ne pas mélanger la manipulation DOM avec Angular. Essayez ce qui suit pour votre bouton 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>

J'ai essayé ce qui précède dans votre Plunker et cela a fonctionné.

1
Aashish Koirala

Dans votre jQuery put auto trigger, par exemple 

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