视图ngValue-Angular JS中未更新模型的更改

Change in model not updated in view ngValue - Angular JS

本文关键字：模型 更新 ngValue-Angular JS 视图      更新时间：2023-09-26

我面临angular的双向绑定和ng值指令的问题。

有一个绑定到ng-value的方法，当值发生更改时，视图中的其他地方不会更新该值。为了解决这个问题，我注册了一个$watch，但$digest抛出了这个错误。我不知道自己哪里出了问题，我想知道在这种情况下该怎么做。

我已经在下面发布了代码。

HTML

<div ng-app='myApp' ng-controller="myController">
 <button ng-click="change()">Change</button>
 <input type="text" ng-value="getData()" />
</div>

脚本

var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
$scope.a = 0;
$scope.getData = function() {
    $scope.a = 50;
    return $scope.a;
}
$scope.change = function() {
    k = 1;
    $scope.a = 100;
    console.log($scope.a)
}
$scope.$watch('a', function() {
     $scope.$digest();
})
})

当我单击按钮Change时，变量的值发生了更改，但在视图中没有更新，所以我尝试了$digest和$apply，这引发了这个错误。

$digest已在进行

非常感谢您的帮助。提前谢谢。

使用ng-model确保正确跟踪输入中的值。听起来您只希望getData从服务中获取输入的初始值。如果这是正确的，您仍然可以在控制器构造函数中调用该函数：

var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
  $scope.getData = function() {
    $scope.a = 50;
    return $scope.a;
  }
  $scope.change = function() {
    k = 1;
    $scope.a = 100;
    console.log($scope.a)
  }
  $scope.getData();
});

那么你的HTML应该是这样的：

<div ng-app='myApp' ng-controller="myController">
  <button ng-click="change()">Change</button>
  <input type="text" ng-model="a" />
</div>

在plunker上试试。

如果你不想使用ng-model，那么试试这个

var app = angular.module('myApp', []);
app.controller('myController', function ($scope, $timeout) {
    $scope.myText = 50;
    $scope.getData = function () {
        return $scope.myText;
    }
    $scope.change = function () {
        k = 1;
        $scope.myText = 100;
    };
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp' ng-controller="myController">
    <button ng-click="change()">Change</button>
    <input type="text" ng-value="getData()" />
</div>

相关文章：