Angularjs中的控制器未更新输入字段

Input field not being updated from controller in Angularjs

本文关键字：更新 输入 字段 控制器 Angularjs      更新时间：2023-09-26

我正处于Angularjs的学习阶段，最近两天遇到了一个问题。我已经看到了很多答案，但不知道如何在我的情况下调整这些解决方案。我想做的是使用angularjs通过按钮更新输入字段。

// html
<body ng-controller="Controller">
    <input type="number" ng-model="data" update-view>
            <br>
    <label for="data">{{data}}</label>
    <button name="btn1"  ng-click='updateInput(1)'>1</button>
</body>
  // js
 var app = angular.module('calculator',[]);
app.controller('Controller', function($scope, $timeout){
    $scope.data = 0;
    var val = '';
    $scope.updateInput = function(param) {
        val += String(param);
        $scope.data = val;
        // val = param;
        // $scope.data = val;       
    }
});

表达式得到求值，但输入字段没有更新。我看到了$setViewValue和$render的其他更新视图，但我不知道如何在这里使用它们。

app.directive('updateView', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {
            element.bind('change', function () {
                // console.log(ngModel);
                scope.$apply(setAnotherValue);
            });
            function setAnotherValue() {
                ngModel.$setViewValue(scope.data);
                ngModel.$render();
            }
        }
    };
});

如有任何帮助，我们将不胜感激。感谢

更新不需要指令
您似乎将一个字符串值设置为$scope.data，这会引发一个错误，因为输入类型是number。

angular.module('calculator', [])
.controller('Controller', function($scope){
  $scope.data = 0;
  var val = '';
  $scope.updateInput = function(n){
    val = n;
    $scope.data = val;
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<body ng-app="calculator" ng-controller="Controller">
  <input type="number" ng-model="data">
  <button ng-click="updateInput(1)">1</button>
</body>

我注意到，如果不将参数转换为字符串，输入字段将随更改后的模型更新，但一旦我将其更改为字符串，它就不会更新输入字段。控制台中也出现了错误。因此，我只是在尝试的基础上，通过仅将$scope.data = val;行的一部分更改为$scope.data = parseInt(val, 10);，将其转换回int，并且hurrrayy输入字段都在更新，就像我想要的那样。正如@cither所建议的，我不需要为此指示。以下是我的工作代码

var app = angular.module('calculator',[]);
app.controller('Controller', function($scope, $timeout){
        $scope.data = 0;
        var val = '';
        $scope.updateInput = function(param) {
            val += String(param);
            $scope.data = parseInt(val, 10);       
        }
    });
相关文章：