0

我有简单的 html 来尝试 AngularJS 数据绑定。当我在输入中输入文本时，它下面的标签会正确绑定，并显示 data.country。但是，当我使用退格键删除文本直到它消失，并尝试再次重新输入文本时，绑定的跨度上没有显示任何内容。这个问题似乎是随机的，因为如果我不断重复这个（输入文本、删除、输入文本），有时它会出现，有时它不会

这是小提琴http://jsfiddle.net/supattwo/eMfNp/

乍一看，我以为是随机的，但实际上它始终是一种模式。1. 输入文字，例如“abcde”。这正确绑定到输入框下方。2. 退格直到文本消失。3. 重新输入文字，例如12345。Bug？输入框下方的 span 中没有显示任何内容。4. 退格直到文本消失。5. 输入一些文本，现在它显示正确，并且不断重复（步骤 1-5）。

我使用batarang进行检查，但这里只有$rootScope，而batarang在$rootScope中没有显示模型。如果我将模型放入控制器中，则没有问题。

<!doctype html>
<html lang="en" ng-app>
<head>
  <meta charset="utf-8">
  <title>My HTML File</title>
  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" href="css/bootstrap.css">
  <script src="lib/angular/angular.js"></script>
  </head>
<body>
  country name: <input type="text" ng-model="data.country"></input>
   <br/><span class="label"> {{data.country}}</span> <br/>
</body>
</html>
4

1 回答 1

0

看看这段代码（http://jsfiddle.net/denisonluz/9mFpp/245/）。这是工作。

<!doctype html>
 <html lang="en" ng-app="myApp">
 <head>
   <meta charset="UTF-8">
   <title>Document</title>

   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>

   <script>

   var myApp = angular.module('myApp', [])
       .controller('MainCtrl', function($scope) {
          $scope.data = {country: 'Brazil'};

          $scope.set = function(new_country) {
              this.data.country = new_country;
          }
      });

   </script>

  </head>
  <body>


    <div ng-controller="MainCtrl">
      <input name="data.country" ng-model="data.country"><br />
       <span>{{data.country}}</span><br />
       <button ng-click="set('Italy')">set to Italy</button>      
    </div>

    </body>
    </html>

关于您面临的问题，我唯一能想到的是您应该在控制器中定义模型，而不是在视图中。（https://stackoverflow.com/a/10612424/1310945）

于 2013-10-07T10:16:34.317 回答