Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了angularjs – 使用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()" />

大佬总结

以上是大佬教程为你收集整理的angularjs – 使用AngularFire时,光标会在键入时跳转到字段结尾全部内容,希望文章能够帮你解决angularjs – 使用AngularFire时,光标会在键入时跳转到字段结尾所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。