Question

我已阅读并尝试应用我可以在SO上找到的所有方法，但这些方法都不起作用。

我只是想在用户登录后加载不同的视图：

myApp.controller('LoginCtrl', ['$scope', '$rootScope', '$location', function($scope, $rootScope, $location) {

    $scope.Login = function () {
        $location.path('/view1');
        // $scope.$apply(); <- error when trying this
    };

}]);

什么都没发生。如果我在更改位置后尝试$ scope。$ apply，那么我会收到“正在进行中的操作”错误（http://docs.angularjs.org/error/$rootScope:inprog?p0=$apply）

我也试过$ location.url等。有人可以告诉我发生了什么事吗？

这是我的路由配置：

angular.module('myApp', [
  'ngRoute',
  'myApp.filters',
  'myApp.services',
  'myApp.directives',
  'myApp.controllers'
]).
config(['$routeProvider', function ($routeProvider) {
  $routeProvider.when('/login', {templateUrl: 'views/login.html', controller: 'LoginCtrl' });
  $routeProvider.when('/view1', {templateUrl: 'views/partial1.html', controller: 'MyCtrl1'});
  $routeProvider.when('/view2', {templateUrl: 'views/partial2.html', controller: 'MyCtrl2'});
  $routeProvider.otherwise({redirectTo: '/login'});
}]);

索引文件：

<!DOCTYPE html>

<html ng-app="myApp">
<head>
    <title>Foxy Flakes of Steel</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

    <link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="assets/css/app.css" />
</head>


<body>


    <div class="container">

        <div class="row" ng-view></div>

    </div>

    <script src="assets/plugins/jquery/jquery-2.0.3.min.js"></script>
    <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>

    <script src="assets/plugins/angularjs/angular.min.js"></script>
    <script src="assets/plugins/angularjs/angular-route.js"></script>
    <script src="assets/js/app.js"></script>
    <script src="assets/js/services.js"></script>
    <script src="assets/js/controllers.js"></script>
    <script src="assets/js/filters.js"></script>
    <script src="assets/js/directives.js"></script>

</body>
</html>

这是login.html视图：

<form class="col-md-5 col-md-offset-3">

    <div class="rounded-gray">

        <div class="row" style="padding: 30px;">
            <div class="input-group" style="margin-bottom: 10px;">
                <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                <input type="text" placeholder="username" class="form-control" ng-model="username">
            </div>

            <div class="input-group" style="margin-bottom: 10px;">
                <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                <input type="text" placeholder="password" class="form-control" ng-model="password">
            </div>

            <div class="row">
                <a href="#" class="btn btn-primary pull-right" style="margin-right: 15px;" ng-click="Login();">Login</a>
            </div>

        </div>
    </div>
</form>

Answer 1

我发现了两个提示;

在路由选择期间你不能使用$ location.path（'/ view1'）。

最好在申请阶段检查是否登录。

app.run(['$rootScope', '$location', 'Auth', function ($rootScope, $location, Auth) {
    $rootScope.$on('$routeChangeStart', function () {
        if (!Auth.isLoggedIn()) {
            $location.path('/login');
        } else {
            $location.path('/home');
        }
    });
}]);

参考：
1. AngularJS and location.path()
2。 Redirecting to a certain route based on condition
3. AngularJS- Login and Authentication in each route and controller

Answer 2

您的登录链接应该是一个按钮。 href正在覆盖你的ng-click动作。

<button type='button' class='btn btn-primary pull-right' ng-click='Login()'>
    Login
</button>

此外，您不需要在ng-click内部使用分号。

（内联样式非常糟糕，顺便说一句）

Answer 3

您可以在视图中使用ng-href="#/view1"，而不是通过ng-click从控制器调用Login方法。

调用控制器功能后无法更改位置

3 个答案: