【问题标题】:How to trigger ng-change from jquery?如何从 jquery 触发 ng-change?
【发布时间】:2026-02-06 16:25:01
【问题描述】:

我有一个选择标签如下:

<select ng-change="doSomething()" ng-model="myModel"> </select>

我正在使用 jQueryUI 控件(组合框),从 jQuery 触发的事件“更改”不会触发 doSomething()。

你知道如何从外部角度触发 ng-change 吗?

【问题讨论】:

    标签: angularjs


    【解决方案1】:

    问题不是如何运行一些代码,而是如何触发更改事件。我找到了一种角度友好的方式来做到这一点。我有一个 jQuery UI 滑块,它可以更改另一个具有 ng-change 的输入的值。秘诀在于,一旦将其转换为 angular.element,您现在就可以访问名为 triggerHandler 的方法。从我所见,使用它不会被认为是不好的做法:

    angular.element(document.getElementById('test')).triggerHandler('change');
    

    tymeJV 的回答直接使用了angular.element("#test") 而没有使用 jQuery,但是我遇到了控制台错误并且以这种方式破坏了功能。此版本无需任何依赖即可运行。

    【讨论】:

    • 这正是我在 jQuery .trigger('change') 不起作用时所需要的。谢谢!
    • 这正是我想要的。这允许您通过 javascript 务实地触发元素上的 ng-change 方法。当您有一个处理输入的自定义指令并且需要在输入值更改时触发更改功能时非常有用。
    • 非常感谢,也帮助了我!
    【解决方案2】:

    呃 - 这是一种糟糕的做法 - 但您可以使用 angular.element 并从驻留在目标控制器中的元素中获取 scope

    例子:

    <div ng-controller="myApp">
        <span id="test"></span>
    </div>
    

    Javascript:

    var scope = angular.element("#test").scope();
    scope.doSomething();
    

    您的scope 变量现在可以访问myApp 控制器上定义的所有方法。

    【讨论】:

    • 如果这是一种糟糕的做法,那么如何处理在服务器上填充了默认值的输入元素?
    • @BauceLawyerson -- 不要填充输入 value 属性 - 而是通过 Angular 解析服务器值并将其分配给正确的 ngModel 变量。
    • 这仅在调试模式下有效。 angular.element("#id").scope() 在发布模式下不可用。请参阅有关“从 DOM 检索范围”的部分。 link