Question

我设置了一个可以编辑一个字段的小样本应用。但是当我输入该字段时，内容会一直恢复到一秒钟之前。我正在寻找AngularFire的修复程序，它可以使它正常工作，或者我正在寻找一个我没有正确初始化它的RTFM。此时bindTo（）不可用，我根本无法继续使用AngularFire。

以下是完整示例（您可以在http://jsbin.com/wabafu/3打开它）：

<!DOCTYPE html>
<html ng-app="myapp">
  <head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>
    <script src='https://cdn.firebase.com/js/client/1.0.19/firebase.js'></script>
    <script src='https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js'></script>
    <script>
      var app = angular.module("myapp", ["firebase"]);
      function MyController($scope, $firebase) {
        var ref = new Firebase("https://stackoverflow25331760.firebaseIO.com/"),
            syncObject = $firebase(ref).$asObject();
        syncObject.$bindTo($scope, "data");
      }
    </script>
  </head>
  <body ng-controller="MyController">
    <h3>
      <input type="checkbox" ng-model="EditMode"> Enable Editing
    </h3>
    <div ng-if="EditMode">
      <input type="text" ng-model="data.SyncValue" style="width:100%">
    </div>
    <div ng-if="!EditMode">
      {{data.SyncValue}}
    </div>
  </body>
</html>

当只在一个浏览器中打开时它工作顺畅，但是当打开多个时，我不能输入多于一个或两个单词而没有文本内容恢复到几个键击前并且光标移动到结束时字段。

我想发生的事件是：

我输入，值以angularjs（GOOD）
Angularfire将新值发送到firebase（GOOD）
Firebase将值发送给其他浏览器（我继续输入时）（GOOD）
其他浏览器会收到新值并更新其html（GOOD）
其他浏览器会将值重新发送回firebase，就好像它是新信息一样（真的很糟糕）
Firebase收到此回显的过期值并将其推回给我（BAD）
我的浏览器获得了这个第二旧值，因为它与我文本字段中的内容不同，我的fiedl的内容被还原（BAD）

我觉得这个过程错了吗？我该怎么做才能停止第5步？

P.S。在测试时，我发现我可以通过快速键入几个字符然后等待2秒重复来解决＃7问题。这样，当同步回显并且我的光标不会跳转时，该值不会改变。

P.P.S。为了尝试缩小范围，我创建了一个复选框来控制数据是显示在字段中，还是只显示只读div。即使第二个浏览器仅显示数据，该回显/恢复行为仍然存在于第一个浏览器中。数据正确存储在firebase中的唯一方法是，如果我一次只有一个浏览器使用它。

Answer 1

通过在输入上添加去抖，我取得了很好的成功。

<input type="text" ng-model="data.field" 
    ng-model-options="{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0} }" />

此外，$ bindTo在这里并不是绝对必要的。手动保存数据并跳过$ bindTo并不是特别困难。

$scope.data = $firebase(new Firebase(...)).$asObject();

<input type="text" ng-model="data.field" ng-blur="data.$save()" />

使用AngularFire时，光标会在键入时跳转到字段结尾

1 个答案: