用jQuery设置输入值后更新角模型用jQuery设置输入值后更新角模型(Update Angula

我有这个简单的场景：

输入元件，其值由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>

下面是我尝试的小提琴：
http://jsfiddle.net/U3pVM/743/

可有人请点我在正确的方向？

Answer 1:

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

对于这种特殊的行为的解释看看这个答案，我以前给了一会：“ 如何AngularJS内部捕获的事件，如‘的onclick’，‘平变化’？ ”

---

但不幸的是，这是不是你的唯一问题。 与其它发表评论指出，您的jQuery为中心的做法是完全错误的。 欲了解更多信息看看这篇文章： 如何“认为AngularJS”如果我有一个jQuery的背景是什么？ ）。

Answer 2:

希望这是有用的人。

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

我然而，能够得到angular.element(jQuery('#myInputElement')).triggerHandler('input')被拾起。

Answer 3:

我不认为jQuery是这里需要。

您可以使用$手表和NG-单击代替

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

Answer 4:

你必须使用下面的代码，以更新的特定输入模型的范围如下

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

Answer 5:

该接受的答案这是触发input事件与jQuery没有为我工作。 创建活动，并与本地JavaScript调度的伎俩。

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

Answer 6:

我加入的动作按钮收听者做出的唯一的控制器初始化的修改：

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

其他的解决方案并没有我的情况下工作。

Answer 7:

我知道这是一个有点晚在这里回答，但也许我可以节省一些曾经的日子。

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

以下是我这样做，可以节约你的时间。

在HTML脚本标签内声明的变量。

喜欢：

<script>
 var inputValue="";

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

</script>

一旦你这样做使用下面的角度服务。

$窗口

现在，下面来自同一个控制器范围称为的getData功能会给你你想要的值。

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

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

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

Answer 8:

我写的jQuery这个小插件，它将使所有调用.val(value)如果存在更新的角度元素：

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

---

例：

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

Answer 9:

如果您使用的是IE，你必须使用：input.trigger（“变”）;

Answer 10:

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

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

也不要忘了加onchange或ng-change的html标记

文章来源: Update Angular model after setting input value with jQuery