Aktualisieren Sie das Winkelmodell, nachdem Sie den Eingabewert mit jQuery festgelegt haben

Ich habe dieses einfache Szenario:

Geben Sie ein Element ein, dessen Wert durch die val () -Methode von jQuery geändert wird.

Ich versuche, das Winkelmodell mit dem von jQuery festgelegten Wert zu aktualisieren. Ich habe versucht, eine einfache Anweisung zu schreiben, aber sie macht nicht das, was ich will.

Hier ist die Richtlinie:

var myApp = angular.module('myApp', []);
myApp.directive('testChange', function() {
    return function(scope, element, attrs) {        
        element.bind('change', function() {
            console.log('value changed');
        })
    }
})

Dies ist der jQuery-Teil:

$(function(){
    $('button').click(function(){
        $('input').val('xxx');
    })
})

und html:

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <input test-change ng-model="foo" />
        <span>{{foo}}</span>
    </div>
</div>

<button>clickme</button>

Hier ist die Geige mit meinem Versuch:
http://jsfiddle.net/U3pVM/743/

Kann mich bitte jemand in die richtige Richtung weisen?

ngModel wartet auf das Ereignis "Eingabe". Um Ihren Code zu "reparieren", müssen Sie dieses Ereignis auslösen, nachdem Sie den Wert festgelegt haben:

$('button').click(function(){
    var input = $('input');
    input.val('xxx');
    input.trigger('input'); // Use for Chrome/Firefox/Edge
    input.trigger('change'); // Use for Chrome/Firefox/Edge + IE11
});

Zur Erklärung dieses speziellen Verhaltens lesen Sie die Antwort, die ich vor einiger Zeit gegeben habe: " Wie fängt AngularJS intern Ereignisse wie 'onclick', 'onchange' ab? "

Leider ist dies nicht das einzige Problem, das Sie haben. Wie bereits in anderen Kommentaren erwähnt, ist Ihr jQuery-zentrierter Ansatz eindeutig falsch. Weitere Informationen finden Sie in diesem Beitrag: Wie denke ich in AngularJS, wenn ich einen jQuery-Hintergrund habe? ).

Hoffe das ist nützlich für jemanden.

Ich konnte das jQuery('#myInputElement').trigger('input')Ereignis nicht in meine eckige App aufnehmen.

Ich konnte jedoch angular.element(jQuery('#myInputElement')).triggerHandler('input')abgeholt werden.

Die akzeptierte Antwort, die ein inputEreignis mit jQuery auslöste, funktionierte bei mir nicht. Das Erstellen eines Ereignisses und das Versenden mit nativem JavaScript haben den Trick getan.

$("input")[0].dispatchEvent(new Event("input", { bubbles: true }));

Ich denke nicht, dass jQuery hier erforderlich ist.

Sie können stattdessen $ watch und ng-click verwenden

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <input test-change ng-model="foo" />
    <span>{{foo}}</span>

    <button ng-click=" foo= 'xxx' ">click me</button>
    <!-- this changes foo value, you can also call a function from your controller -->
  </div>
</div>

In Ihrem Controller:

$scope.$watch('foo', function(newValue, oldValue) {
  console.log(newValue);
  console.log(oldValue);
});

Sie müssen den folgenden Code verwenden, um den Umfang des spezifischen Eingabemodells wie folgt zu aktualisieren

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

Ich habe Änderungen nur an der Controller-Initialisierung vorgenommen, indem ich den Listener auf der Aktionstaste hinzugefügt habe:

$(document).on('click', '#action-button', function () {
        $timeout(function () {
             angular.element($('#input')).triggerHandler('input');
        });
});

Andere Lösungen haben in meinem Fall nicht funktioniert.

Ich weiß, dass es etwas spät ist, hier zu antworten, aber vielleicht kann ich einmal am Tag etwas sparen.

Ich habe mich mit dem gleichen Problem befasst. Ein Modell wird nicht gefüllt, sobald Sie den Wert der Eingabe von jQuery aktualisieren. Ich habe versucht, Trigger-Ereignisse zu verwenden, aber kein Ergebnis.

Hier ist, was ich getan habe, um Ihren Tag zu retten.

Deklarieren Sie eine Variable in Ihrem Skript-Tag in HTML.

Mögen:

<script>
 var inputValue="";

// update that variable using your jQuery function with appropriate value, you want...

</script>

Sobald Sie dies getan haben, verwenden Sie den folgenden Service von Angular.

$ window

Die folgende getData-Funktion, die vom selben Controller-Bereich aufgerufen wird, gibt Ihnen den gewünschten Wert.

var myApp = angular.module('myApp', []);

app.controller('imageManagerCtrl',['$scope','$window',function($scope,$window) {

$scope.getData = function () {
    console.log("Window value " + $window.inputValue);
}}]);

Ich habe dieses kleine Plugin für jQuery geschrieben, das alle Aufrufe zum .val(value)Aktualisieren des Winkelelements ausführt, falls vorhanden:

(function($, ng) {
  'use strict';

  var $val = $.fn.val; // save original jQuery function

  // override jQuery function
  $.fn.val = function (value) {
    // if getter, just return original
    if (!arguments.length) {
      return $val.call(this);
    }

    // get result of original function
    var result = $val.call(this, value);

    // trigger angular input (this[0] is the DOM object)
    ng.element(this[0]).triggerHandler('input');

    // return the original result
    return result; 
  }
})(window.jQuery, window.angular);

Fügen Sie dieses Skript einfach nach jQuery und angular.js ein, und val(value)Updates sollten jetzt gut funktionieren .

Minimierte Version:

!function(n,t){"use strict";var r=n.fn.val;n.fn.val=function(n){if(!arguments.length)return r.call(this);var e=r.call(this,n);return t.element(this[0]).triggerHandler("input"),e}}(window.jQuery,window.angular);

Beispiel:

// the function
(function($, ng) {
  'use strict';
  
  var $val = $.fn.val;
  
  $.fn.val = function (value) {
    if (!arguments.length) {
      return $val.call(this);
    }
    
    var result = $val.call(this, value);
    
    ng.element(this[0]).triggerHandler('input');
    
    return result;
    
  }
})(window.jQuery, window.angular);

(function(ng){ 
  ng.module('example', [])
    .controller('ExampleController', function($scope) {
      $scope.output = "output";
      
      $scope.change = function() {
        $scope.output = "" + $scope.input;
      }
    });
})(window.angular);

(function($){  
  $(function() {
    var button = $('#button');
  
    if (button.length)
      console.log('hello, button');
    
    button.click(function() {
      var input = $('#input');
      
      var value = parseInt(input.val());
      value = isNaN(value) ? 0 : value;
      
      input.val(value + 1);
    });
  });
})(window.jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="example" ng-controller="ExampleController">
  <input type="number" id="input" ng-model="input" ng-change="change()" />
  <span>{{output}}</span>
  <button id="button">+</button>
</div>

Wenn Sie IE verwenden, müssen Sie Folgendes verwenden: input.trigger ("change");

.change()nach dem Einstellen des Wertes hinzufügen .

Beispiel:('id').val.('value').change();

Vergessen Sie auch nicht, HTML hinzuzufügen onchangeoder zu ng-changemarkieren

Ich habe dies getan, um den Wert von ngModel von außen mit Vanilla / jQuery aktualisieren zu können:

function getScope(fieldElement) {
    var $scope = angular.element(fieldElement).scope();
    var nameScope;
    var name = fieldElement.getAttribute('name');
    if($scope) {
        if($scope.form) {
            nameScope = $scope.form[name];
        } else if($scope[name]) {
            nameScope = $scope[name];
        }
    }
    return nameScope;
}

function setScopeValue(fieldElement, newValue) {
    var $scope = getScope(fieldElement);
    if($scope) {
        $scope.$setViewValue(newValue);
        $scope.$validate();
        $scope.$render();
    }
}

setScopeValue(document.getElementById("fieldId"), "new value");