Perbarui model sudut setelah menetapkan nilai input dengan jQuery

Saya punya skenario sederhana ini:

Elemen input yang nilainya diubah dengan metode jQuery's val ().

Saya mencoba memperbarui model sudut dengan nilai yang ditetapkan jQuery. Saya mencoba menulis arahan sederhana, tetapi tidak melakukan apa yang saya inginkan.

Inilah arahannya:

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

ini adalah bagian jQuery:

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

dan html:

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

<button>clickme</button>

Inilah biola dengan percobaan saya:
http://jsfiddle.net/U3pVM/743/

Dapatkah seseorang tolong tunjukkan saya ke arah yang benar?

ngModel mendengarkan acara "input", jadi untuk "memperbaiki" kode Anda, Anda harus memicu acara itu setelah menetapkan nilainya:

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

Untuk penjelasan tentang perilaku khusus ini, periksa jawaban yang saya berikan beberapa waktu lalu: " Bagaimana AngularJS secara internal menangkap peristiwa seperti 'onclick', 'onchange'? "

Namun sayangnya, ini bukan satu-satunya masalah yang Anda miliki. Seperti yang ditunjukkan dengan komentar posting lainnya, pendekatan jQuery-centric Anda jelas salah. Untuk info lebih lanjut, lihat posting ini: Bagaimana cara "berpikir dalam AngularJS" jika saya memiliki latar belakang jQuery? ).

Semoga ini bermanfaat bagi seseorang.

Saya tidak bisa mendapatkan jQuery('#myInputElement').trigger('input')acara untuk diambil aplikasi sudut saya.

Namun saya angular.element(jQuery('#myInputElement')).triggerHandler('input')bisa dijemput.

Jawaban yang diterima yang memicu inputacara dengan jQuery tidak berhasil untuk saya. Membuat acara dan mengirim JavaScript asli berhasil.

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

Saya tidak berpikir jQuery diperlukan di sini.

Anda bisa menggunakan $ watch dan ng-klik saja

<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>

Di controller Anda:

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

Anda harus menggunakan kode berikut untuk memperbarui ruang lingkup model input spesifik sebagai berikut

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

Saya membuat modifikasi hanya pada inisialisasi pengontrol dengan menambahkan pendengar pada tombol tindakan:

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

Solusi lain tidak berfungsi dalam kasus saya.

Saya tahu agak terlambat untuk menjawab di sini, tetapi mungkin saya bisa menghemat beberapa hari sekali.

Saya telah berurusan dengan masalah yang sama. Model tidak akan terisi setelah Anda memperbarui nilai input dari jQuery. Saya mencoba menggunakan peristiwa pemicu tetapi tidak ada hasilnya.

Inilah yang saya lakukan yang dapat menyelamatkan hari Anda.

Deklarasikan variabel dalam tag skrip Anda dalam HTML.

Suka:

<script>
 var inputValue="";

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

</script>

Setelah Anda melakukannya dengan menggunakan layanan angular di bawah ini.

$ window

Sekarang di bawah ini fungsi getData dipanggil dari lingkup pengontrol yang sama akan memberi Anda nilai yang Anda inginkan.

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

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

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

Saya telah menulis plugin kecil ini untuk jQuery yang akan membuat semua panggilan untuk .val(value)memperbarui elemen sudut jika ada:

(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);

Cukup masukkan skrip ini setelah jQuery dan angular.js dan val(value)pembaruan sekarang akan berfungsi dengan baik.

Versi yang diperkecil:

!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);

Contoh:

// 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>

Jika Anda menggunakan IE, Anda harus menggunakan: input.trigger ("change");

tambahkan .change()setelah mengatur nilai.

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

juga jangan lupa menambahkan onchangeatau ng-changememberi tag dalam html

Saya melakukan ini untuk dapat memperbarui nilai ngModel dari luar dengan Vanilla / jQuery:

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");