Angular Js导航问题

时间:2014-07-12 10:46:48

标签: jquery angularjs angularjs-directive angular-ui angular-ui-bootstrap

我正在尝试实现简单的登录功能并获取

http://errors.angularjs.org/1.2.6/ $ rootScope / inprog?P0 =%24digest

异常。这是什么意思?一旦得到成功的回复,我怎样才能导航到主页

我试过了:

$location.path('/home')
$location.path('/home').apply()
$scope.$apply();

等等。

如何在整个会话期间创建会话或维护用户详细信息。 这是我的loginApp模块代码。

angular.module('loginApp', [])                                                                                 
    .config([                                                                     
    '$httpProvider','$routeProvider', '$locationProvider',                                 
    function ($httpProvider, $routeProvider) {  
        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headers.common['X-Requested-With'];

        $routeProvider.when('/login', {
            templateUrl: '/login.html',
            controller: LoginController
        });
        $routeProvider.when('/home', {
            templateUrl: '/home.html',
            controller: LoginController
        });
        $routeProvider.otherwise({ redirectTo: '/login' });

        $locationProvider.html5Mode(true); 

    }                                                                         
])
    .factory('Auth',['$http',
        function($http){
            return {
                login: function(inputs) {
                    return $http.post('API_URL', inputs);
                }
             }
    }])
    .controller('LoginController',['$scope', '$http', 'Auth', '$location', function($scope, $http, Auth, $location) {
        $scope.loginUser = function() {
            Auth.login({
                email: $scope.login.email,
                Password: $scope.login.password,
                APIkey: 'API_KEY'
            }).success(function(data) {
                if (data.error) {
                    $scope.login.msg  = "Please your username and password";
                } else {
                 //   $rootScope.user = user;
                        $scope.$apply(function() { $location.path("/home"); });
                    $scope.login.msg  = "You are logged in successfully.";
                }
            }).error(function(data) {
                 $scope.login.msg  = "Error in Response.";

            });

        },
      $scope.logout = function() {
          // user is logged out
        //  $rootScope.user = null;
     }
    }]);

我的HTML代码login.html

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en" data-ng-app="loginApp"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en" data-ng-app="loginApp"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en" data-ng-app="loginApp"> <![endif]-->
<!--[if gt IE 8]> <html lang="en" data-ng-app="loginApp"> <![endif]-->
<!--[if !IE]><!--><html data-ng-app="loginApp"> <!--<![endif]-->
  <head>
    <meta charset="UTF-8">
     <!--[if lte IE 8]>
    <script src="JSON/json2.js"></script>
<![endif]-->
    <link type="text/css" rel="stylesheet" href="stylesheets/style.css">
    <!-- Bootstrap styles -->
    <link rel="stylesheet" href="widget/stylesheets/bootstrap.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  </head>
  <body>
  <div id="wrap">
    <!-- HEADER -->
    <div id="header">
        <ul>
          <li><a href="home.html"><img src="images/home.png" alt="home"/></a></li> 
          <li><a href="upload.html"><img src="images/upload.png" alt="job_posting"/></a></li>
          <li><a href="download.html"><img src="images/list.png" alt="download"/></a></li> 
        </ul>
        <img src="images/logo.png" class="dialogicalogo" alt="Dialogica"/> 
    </div>
    <!-- END HEADER -->
    <!-- CONTENT -->
    <div id="login" data-ng-controller="LoginController">
      <div id="content_header">
        <img src="images/login.png" alt="job_posting"/>
        <h1>User Login</h1>
      </div>
      <form>
        <p>{{ login.msg }}</p>
        <div>
          <label for="email">Email Address</label>
          <input type="email" id="email" value="email" data-ng-model="login.email" onblur="if(this.value=='') this.value='email';" onfocus="if(this.value=='email') this.value='';" />
        </div>
        <div>
          <label for="password">Password</label><a href="help.html" class="help">[Forgot?]</a>
          <input type="password" id="password" value="Password" data-ng-model="login.password" onblur="if(this.value=='') this.value='Password';" onfocus="if(this.value=='Password') this.value='';" />
        </div>

      </form>
      <a href="#" data-ng-click="loginUser()" class="button blue center">Log in</a>
    <!-- END CONTENT -->
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="widget/js/angular.min.js" type="text/javascript"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-cookies.min.js" type="text/javascript"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-route.min.js" type="text/javascript"></script>
    <!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
    <script src="widget/js/jquery.ui.widget.js"></script>

    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <!-- The main application script -->
    <script src="widget/js/services/auth.js"></script>
    <script src="widget/js/app.js"></script>
    <script src="widget/js/jquery.placeholder.js"></script>

    <script>
        $(function() {
            // Invoke the plugin
            $('input, textarea').placeholder();
        });
    </script>
  </body>
</html> 

2 个答案:

答案 0 :(得分:0)

一些事情。在你的控制器中你已经应用了scope.apply这是无关紧要的,不应该在那里使用。如果未应用scope.apply,那么您的location.path将起作用 更新:$ locationParams依赖项应该包含在$ location依赖项

之前
.controller('LoginController',['$scope', '$http', 'Auth', '$routeParams','$location',function($scope, $http, Auth,$routeParams, $location) {
        $scope.loginUser = function() {
            Auth.login({
                email: $scope.login.email,
                Password: $scope.login.password,
                APIkey: 'API_KEY'
            }).success(function(data) {
                if (data.error) {
                    $scope.login.msg  = "Please your username and password";
                } else {
                 //   $rootScope.user = user;
                 // No Apply method required
  //$scope.$apply(function() { 
                 $location.path("/home");
                 $scope.login.msg  = "You are logged in successfully.";
             }
            }).error(function(data) {
                 $scope.login.msg  = "Error in Response.";

            });

        },
      $scope.logout = function() {
          // user is logged out
        //  $rootScope.user = null;
     }
    }]);

答案 1 :(得分:-1)

您可以使用$cookieStore or $cookie存储登录信息,因此在成功时您需要将用户身份验证令牌放入cookie中。

请查看以上链接,了解有关如何存储Cookie的示例。