Question

为什么更改textarea中的值会破坏绑定？允许myVal更新为Hello，但如果输入其他内容，则点击该按钮不再更新该值。

HTML

<!doctype html>
<html ng-app="app">
<head>
</head>
<body>

  <div ng-controller="Ctrl">
  <textarea ng-bind="formModel.myVal"></textarea>
  <button ng-click="update()">Update</button>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
  <script src="script.js"></script>
</body>
</html>

JS

var app = angular.module('app', []);

app.controller('Ctrl', function($scope, $timeout) {
 $scope.formModel = {};

 $timeout(function() {
   $scope.formModel.myVal = 'Hello';
 }, 1000);

 $scope.update = function() {
   $scope.formModel.myVal = 'Bye';
 };
});

修改

澄清;我想要单向绑定，这是ng-bind提供的。我想知道为什么改变textarea中的值会破坏这种单向绑定。如果我试图直接绑定到一个字符串，我会期望这个，但绑定是一个对象属性。

Answer 1

更新您的代码

ng-model缺失

当您的范围已经绑定到您的html时使用ngBind，在插入数据时使用ngModel，并且您还可以使用绑定数据更改时间。

＆＃13;

<!doctype html>
<html ng-app="app" ng-controller="Ctrl">
<head>
</head>
<body>
    <div>
        <textarea ng-model="formModel.myVal" ></textarea>
        <button ng-click="update()">Update</button>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
    <script>

        var app = angular.module('app', []);

        app.controller('Ctrl', function ($scope, $timeout) {
            $scope.formModel = {};

                $scope.formModel.myVal = 'Hello';

            $scope.update = function () {
                $scope.formModel.myVal = 'Bye';
            };
        });

    </script>
</body>
</html>

＆＃13;

Answer 2

你可以使用ng-model这样，你可以让它更新，当你调用函数时，你也可以获得你的设定值。

＆＃13;

var app = angular.module('app', []);

app.controller('Ctrl', function($scope, $timeout) {
 $scope.formModel = {};

 $timeout(function() {
   $scope.formModel.myVal = 'Hello';
 }, 1000);

 $scope.update = function() {
   $scope.formModel.myVal = 'Bye';
 };
});

＆＃13;

<!doctype html>
<html ng-app="app">
<head>
</head>
<body>

  <div ng-controller="Ctrl">
  <textarea ng-model="formModel.myVal"></textarea> 
  <button ng-click="update()">Update</button>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
  <script src="script.js"></script>
</body>
</html>

＆＃13;

更改值后，ng-bind在textarea上中断

2 个答案: