Angular和Firebase中的3路绑定导致输入框滞后

Jor*_*ash 0 javascript angularjs firebase

我将用户配置文件数据绑定到这样的变量:

// Profile Management
var user = firebase.child('users').child(userID);
$firebaseObject(user).$bindTo($scope, 'user');
Run Code Online (Sandbox Code Playgroud)

这是HTML:

<div ng-show="firebaseUser">
    <h1>Your Profile</h1>

    <div class="contentContainer">
        <div class="profilePicture">
            <img src="images/noProfile.png">
        </div>
        <div class="personalInfo">

            <input type="text" ng-model="user.Name" ng-change="user.$save()" type="text" 
                   label="Name" placeholder="Your Name.." name="userName">
            <input type="text" ng-model="user.Phone" ng-change="user.$save()" type="text" 
                   label="Phone" placeholder="Your Phone #.." name="userPhone">

            <label>Email</label>
            {{firebaseUser.password.email}}
        </div>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

它正常工作,当我输入配置文件时,它会自动更新Firebase数据库,但是存在严重的延迟,如果你键入快速输入很多单词被忽略,这是非常明显的,这种情况发生得太多以至于它无法使用.

我究竟做错了什么?

Lin*_*ham 7

用户这个.ng-model-options="{debounce: {'default': 500} }触发的范围周期将延迟500ms.您还可以调整它以适应应用程序的使用.欢呼!

    <input type="text" ng-model="user.Name" ng-change="user.$save()" type="text" 
    ng-model-options="{debounce: {'default': 500} }"   
    label="Name" placeholder="Your Name.." name="userName">

    <input type="text" ng-model="user.Phone" ng-change="user.$save()" type="text" 
    ng-model-options="{debounce: {'default': 500} }"
    label="Phone" placeholder="Your Phone #.." name="userPhone">
Run Code Online (Sandbox Code Playgroud)