使用jQuery设置输入值后更新角度模型

我有一个简单的场景：

输入元素，该元素的值由jQuery的val（）方法更改

我试图用jQuery设置的值更新角度模型。我试着写一个简单的指令，但它没有达到我想要的效果

以下是指令：

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>

{{foo}}
点击我

这就是我的尝试：

有人能给我指一下正确的方向吗

ngModel侦听“输入”事件，因此要“修复”代码，您需要在设置值后触发该事件：

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

对于这种特殊行为的解释，请查看我不久前给出的答案：“

---

---

但不幸的是，这不是你唯一的问题。正如其他帖子评论所指出的，以jQuery为中心的方法是完全错误的。有关更多信息，请参阅本文：）。

我认为这里不需要jQuery

您可以使用和来代替

---

您必须使用以下代码来更新特定输入模型的范围，如下所示

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

---

希望这对某人有用

我无法获取要在我的angular应用程序中拾取的

jQuery（'#myInputElement'）.trigger（'input'）

事件

---

然而，我能够获取

angular.element（jQuery（“#myInputElement”））.triggerHandler（'input'）

。

我为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）

更新后弹出此脚本，现在就可以很好地运行了

---

缩小版：

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

---

例如：

//函数
（函数（$，ng）{
"严格使用",；
var$val=$.fn.val；
$.fn.val=函数（值）{
if（！arguments.length）{
返回$val.call（此）；
}
var result=$val.call（这个值）；
ng.element（此[0]）.triggerHandler（'input'）；
返回结果；
}
})（window.jQuery，window.angular）；
（功能（ng）{
ng.module（'示例'，[]））
.controller（'ExampleController'，函数（$scope）{
$scope.output=“输出”；
$scope.change=函数（）{
$scope.output=”“+$scope.input；
}
});
})（窗口角度）；
（函数（$）{
$（函数（）{
变量按钮=$（“#按钮”）；
如果（按钮长度）
log（'hello，button'）；
按钮。单击（函数（）{
变量输入=$（“#输入”）；
var value=parseInt（input.val（））；
值=isNaN（值）？0：值；
输入.val（值+1）；
});
});
})（window.jQuery）

{{output}}
+
通过添加操作按钮上的侦听器，我仅对控制器初始化进行了修改：

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

其他解决方案在我的情况下不起作用。
如果您使用IE，则必须使用：input.trigger（“change”）
 设置值后添加
.change（）

示例：
（'id'）.val.（'value'）.change（）

另外，不要忘记在html中添加
onchange
或
ng change
标记使用jQuery触发
input
事件的已接受答案对我不起作用。创建一个事件并使用本机JavaScript进行调度就成功了

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

我知道在这里回答有点晚，但也许我可以每天节省一些时间。

我一直在处理同样的问题。更新jQuery输入的值后，模型将不会填充。我尝试使用触发器事件，但没有结果

这是我所做的，也许能救你一天

在HTML脚本标记中声明一个变量

比如：

我这样做是为了能够使用Vanilla/jQuery从外部更新ngModel的值：

函数getScope（fieldElement）{
var$scope=angular.element（fieldElement.scope（）；
变量名称镜；
var name=fieldElement.getAttribute（'name'）；
如果（$范围）{
if（$scope.form）{
nameScope=$scope.form[name]；
}else if（$scope[name]）{
名称范围=$scope[name]；
}
}
返回名称镜；
}
函数setScopeValue（fieldElement，newValue）{
var$scope=getScope（fieldElement）；
如果（$范围）{
$scope.$setViewValue（newValue）；
$scope.$validate（）；
$scope.$render（）；
}
}
setScopeValue（document.getElementById（“fieldId”），“新值”）；
不是OP所要求的，而是针对任何可能会编写一个用户脚本的灵魂，该脚本将遍历输入字段并填充所需的详细信息。没有什么（完全）对我有效，但最终还是以这种方式完成了：

var el = $('#sp_formfield_fw_ip');
el.val("some value");
angular.element(el).triggerHandler('focus');
angular.element(el).triggerHandler('input');
angular.element(el).triggerHandler('change');
angular.element(el).triggerHandler('blur');

打开开发人员工具，检查添加事件的
输入
字段。在那里我发现了所有这些（在我的例子中）：
focus
，
input
，
change
和
blur
，混合AngularJS和jQuery，在指令之外，通常是个坏主意。你想做什么，jQuery是强制性的吗？为什么不在控制器中的函数中设置带有angular的click事件来更改模型的值呢？@Blackhole，我正在使用jQuery上传插件来完成它的工作，并将上传文件的路径放入隐藏的输入中。我所需要的就是在角度模型中访问该路径。所以我想我会将其设置为隐藏输入的值，并在更改后更新角度模型。。。你能检查并指出你用JQ改变值的地方吗？你的提琴链接到一个Todo示例应用程序，它与这个问题无关。谢谢你，乌托皮克，你说得对，我不应该把jquery和angular混为一谈，因为有办法用angular完成这项工作。酷！但有一个例外：为什么它对隐藏的输入不起作用？当我将输入类型切换为文本时，它会按预期工作。这解决了使用jquery日历插件时的一个主要问题。通过破解插件在input.va之后触发（'input'）
$("input")[0].dispatchEvent(new Event("input", { bubbles: true }));

<script>
 var inputValue="";

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

</script>

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

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

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

var el = $('#sp_formfield_fw_ip');
el.val("some value");
angular.element(el).triggerHandler('focus');
angular.element(el).triggerHandler('input');
angular.element(el).triggerHandler('change');
angular.element(el).triggerHandler('blur');