Question

这个让我难过。我试过没有$ scope。$ apply以及使用$ scope。$ watch。如何在调用onlogin时更新isLoggedIn？

我的控制器代码

  myControllers.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
    $scope.test = "hello";
    $scope.isLoggedIn = false;

    $scope.signIn = function() {
        navigator.id.request();

    };


    $scope.$watch('isLoggedIn', function () {
        $scope.$apply(function () {
            $scope.test = "ETESFSF";
        });
    });

    var currentUser = 'bob@example.com';

    navigator.id.watch({
        loggedInUser: currentUser,
        onlogin: function (assertion) {
            // A user has logged in! Here you need to:
            // 1. Send the assertion to your backend for verification and to create a session.
            // 2. Update your UI.


            $http({ method: 'GET', url: '/api/login' }).
                success(function (data, status, headers, config) {

                    $scope.$apply(function () {
                        $scope.isLoggedIn = true;
                    });


                    return data;
                }).
                error(function (data, status, headers, config) {
                    // called asynchronously if an error occurs
                    // or server returns response with an error status.
                    $scope.$apply(function () {
                        $scope.isLoggedIn = true;
                    });
                    return data;
                });


        },
        onlogout: function () {
            // A user has logged out! Here you need to:
            // Tear down the user's session by redirecting the user or making a call to your backend.
            // Also, make sure loggedInUser will get set to null on the next page load.
            // (That's a literal JavaScript null. Not false, 0, or undefined. null.)
            $.ajax({
                type: 'POST',
                url: '/auth/logout', // This is a URL on your website.
                success: function (res, status, xhr) { window.location.reload(); },
                error: function (xhr, status, err) { alert("Logout failure: " + err); }
            });
        }
    });



}]);

我的HTML代码

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>My Appp</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    </head>
    <body ng-app="myApp">

    <a href="/">Home</a> |
    <a href="/test">Test</a>

    <div ng-controller="MainCtrl">
        {{test}}

        <div class="view-animate-container">
            <div ng-view class="view-animate">

            </div>
        </div>

        <div class="wrap">
            <a ng-hide="isLoggedIn" ng-click="signIn();" class="persona-button orange"><span>Sign in with your Email</span></a>
            <a ng-show="isLoggedIn" ng-click="signIn();" class="persona-button black"><span>Logout</span></a>
        </div>
        {{isLoggedIn}}
</div>
    <script src="app/js/jquery-2.1.1.min.js"></script>
    <script src="https://login.persona.org/include.js"></script>
    <script src="app/js/angular.min.js"></script>
    <script src="app/js/angular-route.min.js"></script>
    <script src="app/js/angular-animate.min.js"></script>
    <script src="app/js/app.js"></script>
    <script src="app/js/controllers.js"></script>

    <link rel="stylesheet" type="text/css" href="app/css/animation.css" />
    <link rel="stylesheet" type="text/css" href="app/css/persona-buttons.css" />
</body>
</html>

AngularJS $范围未使用Mozilla Persona进行更新

0 个答案: