当前位置: 首页 > 面试题库 >

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

满自明
2023-03-14
问题内容

我有一个简单的场景:

输入元素,其值由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/

有人能指出我正确的方向吗?


问题答案:

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

不幸的是,这不是您遇到的唯一问题。正如其他评论所指出的那样,以jQuery为中心的方法是完全错误的。。



 类似资料:
  • 问题内容: 我有一个输入文本是这样的: 哪些产生以下HTML 我想使用jquery设置此输入文​​本的值,所以我做到了: 但是,它不起作用…我的语法有什么错误? 问题答案: 您的选择器正在检索文本框的周围,而不是其内部的输入。 看到输出HTML后更新 如果ASP.NET代码可靠地输出具有id属性的HTML ,则可以更简单地使用: 如果失败,则需要在浏览器的错误控制台中确认没有其他脚本错误导致此操作

  • 问题内容: 我目前正在使用YUI小工具。我也有一个Javascript函数来验证YUI为我绘制的输出: 这是我的: 正如您所看到的,我的问题是,如何将值设置为? 问题答案: 试试…为YUI 正常 与JQuery

  • 问题内容: 我有一个CKEditor文本区域: 我有jQuery试图从数据库中设置值: 不用担心我已经测试过的子字符串正在返回一个字符串。出于测试目的,我将子字符串替换为“ test”,并收到了相同的问题。 我知道围绕此行的jQuery不会影响它,因为我正在尝试填充工作的其他文本字段。就涉及到ckeditor。 这是整个脚本: 问题是没有填充任何内容,也没有显示javascript错误。 我试图阅

  • 我尝试使用localStorage保存输入元素的位置。我保存了输入元素的位置,在重新加载页面后,我可以访问它,但在刷新页面后,它始终处于默认位置。(值真/假) HTML: JS: 明确地说,我正在创建chrome扩展(选项页)。 编辑:

  • 如何通过JavaScript或jQuery在更多输入字段中设置值(默认值)?非常感谢。

  • 问题内容: 我正在尝试使用bootstrapscollspy突出显示由角度中继器生成的列表项。 我遇到的问题是,我在Angle将模型更改应用到视图之前,正在从angular控制器刷新scrollspy插件。 确保DOM本身已更新(不仅仅是角度模型)之后,确保scrollspy(’refresh’)调用发生的角度方法是什么? 模板: 控制器: 问题答案: 我如何使用Blesh的答案解决此问题 模板: