AngularJS 是一种流行的 JavaScript 框架，它提供了一种方便的方式来构建动态的 Web 应用程序。在 AngularJS 中，我们可以使用双向数据绑定来实现模型和视图之间的同步更新。然而，有时候我们可能需要手动更新输入，但却发现这样做并不会触发模型中的更改。本文将介绍这个问题，并提供解决方案。
问题描述在 AngularJS 中，我们通常使用 ng-model 指令将输入元素与模型绑定起来。这样，当用户输入内容时，模型会自动更新，反之亦然。然而，有时候我们可能需要在某些情况下手动更新输入，例如通过 JavaScript 代码来修改输入框的值。然而，我们会发现，尽管输入框的值已经被修改，但模型中的值却没有相应地更新。案例代码为了更好地理解这个问题，让我们来看一个简单的示例。假设我们有一个包含输入框和按钮的表单，用户可以在输入框中输入内容，并通过点击按钮来更新输入框的值。同时，我们还将在模型中存储输入框的值，并在页面上显示出来。HTML 代码如下：htmlJavaScript 代码如下：输入框的值: {{inputValue}}
javascriptvar app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.inputValue = '初始值'; $scope.updateInput = function() { // 手动更新输入框的值 document.querySelector('input').value = '新的值'; };});在这个示例中，我们通过点击按钮来更新输入框的值。但是，当我们点击按钮后，我们会发现输入框的值被更新了，但是模型中的值仍然是旧的值。这是因为手动更新输入框的值不会触发模型中的更改。解决方案为了解决这个问题，我们可以使用 AngularJS 提供的 $apply() 方法来手动触发模型的更新。$apply() 方法会通知 AngularJS 进行脏检查，从而更新模型和视图。为了在我们的示例中使用 $apply() 方法，我们需要稍作修改。首先，在我们的控制器中注入 $rootScope，然后在 updateInput() 函数中调用 $apply() 方法。修改后的 JavaScript 代码如下：javascriptapp.controller('myCtrl', function($scope, $rootScope) { $scope.inputValue = '初始值'; $scope.updateInput = function() { // 手动更新输入框的值 document.querySelector('input').value = '新的值'; // 手动触发模型的更新 $rootScope.$apply(); };});现在，当我们点击按钮来更新输入框的值时，模型中的值也会相应地更新。在 AngularJS 中，手动更新输入不会触发模型中的更改。为了解决这个问题，我们可以使用 $apply() 方法来手动触发模型的更新。通过在控制器中注入 $rootScope，并在需要更新模型的地方调用 $apply() 方法，我们可以确保模型和视图的同步更新。