JQuery ile giriş değerini ayarladıktan sonra açısal modeli güncelleyin

Bu basit senaryo var:

Değeri jQuery'nin val () yöntemiyle değiştirilen girdi öğesi.

JQuery set değeri ile açısal modeli güncellemeye çalışıyorum. Basit bir direktif yazmaya çalıştım, ama istediğimi yapmıyorum.

İşte yönerge:

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

bu jQuery kısmı:

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

ve html:

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

<button>clickme</button>

İşte denememle keman:
http://jsfiddle.net/U3pVM/743/

Birisi bana doğru yönde işaret edebilir?

ngModel "input" olayını dinler, bu nedenle kodunuzu "düzeltmek" için değeri ayarladıktan sonra bu olayı tetiklemeniz gerekir:

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

Bu özel davranışın açıklaması için bir süre önce verdiğim cevabı inceleyin: " AngularJS dahili olarak 'onclick', 'onchange' gibi olayları nasıl yakalar? "

Ama maalesef, sahip olduğunuz tek sorun bu değil. Diğer gönderi yorumlarında belirtildiği gibi, jQuery merkezli yaklaşımınız yanlıştır. Daha fazla bilgi için şu gönderiye bir göz atın: Bir jQuery arka planım varsa “AngularJS'de nasıl düşünürüm”? ).

Umarım bu birisi için yararlıdır.

jQuery('#myInputElement').trigger('input')Etkinliğin açısal uygulamamı almasını sağlayamadım .

Ancak alınmayı başardım angular.element(jQuery('#myInputElement')).triggerHandler('input').

inputJQuery ile olayı tetikleyen kabul edilen cevap benim için işe yaramadı. Bir etkinlik oluşturmak ve yerel JavaScript ile göndermek hile yaptı.

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

Burada jQuery gerekli olduğunu sanmıyorum.

Bunun yerine $ watch ve ng-click kullanabilirsiniz

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

Kumandanızda:

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

Belirli giriş modelinin kapsamını aşağıdaki gibi güncellemek için aşağıdaki kodu kullanmanız gerekir

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

İşlem düğmesinde dinleyici ekleyerek yalnızca denetleyicinin başlatılmasında değişiklikler yaptım:

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

Benim durumumda başka çözümler işe yaramadı.

Burada cevap vermek için biraz geç olduğunu biliyorum ama belki günde bir kere kurtarabilirim.

Ben de aynı problemle uğraşıyorum. JQuery'den giriş değerini güncellediğinizde model doldurulmaz. Tetikleyici olayları kullanmayı denedim ama sonuç yok.

İşte yaptığım şey, gününüzü kurtarabilir.

Komut dosyası etiketinizdeki bir değişkeni HTML olarak bildirin.

Sevmek:

<script>
 var inputValue="";

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

</script>

Bir kez aşağıdaki açısal hizmetini kullanarak yaptı.

$ pencere

Şimdi aynı kontrolör kapsamından çağrılan getData fonksiyonu size istediğiniz değeri verecektir.

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

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

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

.val(value)Varsa açısal öğeyi güncellemek için tüm çağrıları yapacak jQuery için bu küçük eklentiyi yazdım :

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

Sadece jQuery ve angular.js sonra bu komut dosyası pop ve val(value)güncellemeler şimdi güzel oynamak gerekir.

Küçültülmüş sürüm:

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

Misal:

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

IE kullanıyorsanız şunları kullanmanız gerekir: input.trigger ("change");

.change()değeri ayarladıktan sonra ekleyin .

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

ayrıca html'ye eklemeyi onchangeveya ng-changeetiketlemeyi unutmayın

Bunu vanilla / jQuery ile dışarıdan ngModel değerini güncelleyebilmek için yaptım:

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