绑定不适用于Angular.js和Firebase简单登录

debugcn 发表于 Dev

逃避

与Angular一起使用时，Firebase Simple Login出现一些奇怪的行为。

我无法按预期方式绑定$ scope变量。我认为$ scope.test或$ scope.test在成功登录后将发生变化，但事实并非如此。即使登录后也保持为假。鉴于这是我的第一个Angular项目，所以我猜这很简单，但是我四处张望，没有找到答案。

代码很简单。首先是HTML：

<body ng-app>
    <div ng-controller="LoginController">
        <div ng-hide="test">
            <h1>Welcome.  Please log in.</h1>
            <p>Test is {{test}}</p>
            <label>Username</label>
            <input type="text" ng-model="username" />
            <label>Password</label>
            <input type="password" ng-model="password" />
            <button ng-click="login()">Log in</button>
        </div>
        <button ng-show="test" ng-click="logout()">Log out</button>
    </div>

    <script type='text/javascript' src='https://cdn.firebase.com/js/client/1.0.6/firebase.js'></script>
    <script type='text/javascript' src='https://cdn.firebase.com/js/simple-login/1.2.5/firebase-simple-login.js'></script>
    <script type="text/javascript" src="js/lib/angular.js"></script>
    <script type="text/javascript" src="js/controllers/LoginController.js"></script>
</body>

和一个控制器：

function LoginController($scope) {
    var FB = new Firebase("https://[myfirebase].firebaseio.com");
    $scope.user = false;
    $scope.error = false;
    $scope.test = false;

    $scope.auth = new FirebaseSimpleLogin(FB, function(error, user){
        if(error) {
            $scope.error = error;
        } else if(user) {
            // would expected binding to take effect here, but not
            $scope.user = user;
            $scope.test = true;
        } else {
            console.log("no user");
        }
    });

    $scope.logout = function() {
        this.auth.logout();
    };

    $scope.login = function () {
        console.log("Attempting login");
        this.auth.login('password', {
            email: this.username,
            password: this.password
        });
    };
}

感谢任何能为我指明正确方向的人。

菲尔·普赖斯

您需要使用$scope.$apply()来让angular知道您已经更改了示波器上的某些内容。将第3方库与受监视的作用域变量集成时，需要执行此操作。

$scope.auth = new FirebaseSimpleLogin(FB, function(error, user){
    $scope.$apply(function() {
        if(error) {
            $scope.error = error;
        } else if(user) {
            // would expected binding to take effect here, but not
            $scope.user = user;
            $scope.test = true;
        } else {
            console.log("no user");
        }
    }
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。