使用 jQuery 更改文本输入值 - Chrome 扩展答案

【问题标题】：Change text input value with jQuery - Chrome extension使用 jQuery 更改文本输入值 - Chrome 扩展
【发布时间】：2014-05-07 22:07:53
【问题描述】：

我正在尝试通过 chrome 扩展更改特定网站的输入值。为了做到这一点，我在我的内容脚本中使用了 jQuery。它在大多数情况下都有效，但是当它是 AngularJS 视图的一部分时，我没有设法更改输入的值。当我使用 let say kendoUI 时，我发现了同样的问题。我正在尝试设置调用$('element').val('value') 的值，然后尝试调用模糊和更改事件，但没有任何成功。我浏览了可能与该主题相关的 99% 的帖子，但仍然找不到有效的解决方案。

【问题讨论】：

jimhoskins.com/2012/12/17/angularjs-and-apply.html 了解您的问题的最佳文章...
是不是说明我的问题没有解决方案？
不，这是一个非常基本的概念，但你应该知道它，当你在 Angular 之外操作 dom 时，Angular 对此一无所知，这就是为什么你看不到任何变化......解决它你应该用 $scope.apply() 包装你的 jquery 函数，然后 angular get changes...
但是我怎么能在 angularjs 世界之外调用 $scope.apply() 。我如何提到我正在从我的内容脚本中注入 jQuery 代码。其实我不是注入它而是调用 eval() 方法。

标签： javascript jquery angularjs google-chrome google-chrome-extension

【解决方案1】：

你只需要调用 $scope.apply() 来让 Angular 知道更新绑定。这主要是因为默认情况下，Angular 对您在 jQuery 中所做的更改一无所知。

以下是示例代码，这里是jsFiddle。希望这会有所帮助。

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

    $scope.changeValue = function() {
     $('#test').val("new Value");
        $scope.apply();
    }

  <div class="form-inline">
            <input type="text" id="test" value="test">
            <input type="submit" value="submit" ng-click="changeValue()">
  </div>

【讨论】：

感谢您的回答！但可能我没有足够清楚地解释我的问题。想象一下，您有一个网站，其中包含一个文本输入（您没有代码，也不是该网站的所有者）。形成您的 chrome 扩展，您必须更改此输入的值。为了做到这一点，我正在使用 jQuery.va()。这是我的问题，这种方法不适用于实现 MVC 模式的情况，例如使用 angularjs 开发网站时。
我没有尝试过使用 chrome 扩展，所以我不确定。我发现了一个类似的问题，您可能会觉得它有点帮助。 stackoverflow.com/questions/15595972/…