使用jQuery设置input值后更新Angular模型

我有这个简单的情况:

input元素的值由jQuery的val()方法改变。

我正在尝试用jQuery设置的值更新angular度模型。 我试图写一个简单的指令,但它没有做我想要的。

这是指令:

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

这是jQuery的一部分:

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

和html:

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

这里是我的尝试小提琴:
http://jsfiddle.net/U3pVM/743/

有人能指点我的方向吗?

ngModel监听“input”事件,因此,在设置值之后,要“修复”您需要触发该事件的代码:

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

对于这个特定行为的解释,请查看我之前提到的这个答案:“ AngularJS如何在内部捕获像'onclick','onchange'这样的事件?


但不幸的是,这不是你唯一的问题。 正如其他post的评论指出的,你的jQuery为中心的方法是错误的。 有关更多信息请看这篇文章: 如果我有一个jQuery背景,我如何“在AngularJS中思考”? )。

希望这对某个人有用。

我无法得到jQuery('#myInputElement').trigger('input')事件被拿起我的angular度的应用程序。

然而,我能够得到angular.element(jQuery('#myInputElement')).triggerHandler('input')

我不认为这里需要jQuery。

您可以使用$ watch和ng-click代替

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

在你的控制器中:

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

您必须使用以下代码才能更新特定input模型的范围,如下所示

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

我只在控制器初始化上添加了监听器的操作button:

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

其他解决scheme在我的情况下不起作用。

使用jQuery触发input事件的接受答案不适用于我。 创build一个事件并使用原生JavaScript进行调度也有诀窍。

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

我知道在这里回答有点晚,但也许我可以一天保存一些。

我一直在处理同样的问题。 一旦你更新jQuery的input值,模型将不会被填充。 我尝试使用触发事件,但没有结果。

这是我做的,可能会节省你的一天。

在HTML脚本标签中声明一个variables。

喜欢:

 <script> var inputValue=""; // update that variable using your jQuery function with appropriate value, you want... </script> 

一旦你通过使用下面的服务angular。

$窗口

现在在同一个控制器范围内调用getData函数将会给你你想要的值。

 var myApp = angular.module('myApp', []); app.controller('imageManagerCtrl',['$scope','$window',function($scope,$window) { $scope.getData = function () { console.log("Window value " + $window.inputValue); }}]); 

我已经写了这个jQuery插件,这将使所有调用.val(value)更新angular元素,如果存在:

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

只要在jQuery和angular.js和val(value)更新应该现在打好后popup此脚本。


缩小版本:

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

例:

 // 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,你必须使用:input.trigger(“change”);

添加.change()后设置的值。

例如:( ('id').val.('value').change();

也不要忘记在html中添加onchangeng-change标签