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

发布时间：2020-12-17 17:38:15 所属栏目：安全来源：网络整理

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

我设置了一个编辑一个字段的小样本应用程序.但是当我输入该字段时,内容会一直恢复到一秒钟之前.我正在寻找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将值发送给其他浏览器(我继续输入时)(好)
>其他浏览器收到新值并更新其html(GOOD)
>其他浏览器将值重新发送回firebase,就像它是新信息一样(真的很糟糕)
> Firebase接收到这个回显过时的值并将其推回给我(BAD)
>我的浏览器获得了这个第二旧的值,因为它与我文本字段中的内容不同,我的fiedl的内容被恢复(BAD)

我想这个过程是错的吗？我该怎么做才能停止第5步？

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

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

解决方法

通过在输入上添加去抖,我获得了很好的成功.

<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()" />

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!