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

I have read and tried applying all of the approaches I can find on SO but none of them work.

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

I just basically want to load a different view once the user logs in:

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

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

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

}]);

Nothing happens. If I try $scope.$apply after changing the location then I get the 'action already in progress' error (http://docs.angularjs.org/error/$rootScope:inprog?p0=$apply)

什么都没发生。如果我尝试$ scope。$ apply更改位置后我会得到'动作已在进行中'错误(http://docs.angularjs.org/error/$rootScope:inprog?p0=$apply)

I have also tried $location.url, etc. Can someone please clue me in on what is happening?

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

Here is my routing config:

这是我的路由配置:

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'});
}]);

Index File:

<!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>

And here is the login.html view:

这是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>

3 个解决方案

#1

Two tips that I found;

我找到的两个提示;

you cannot use $location.path('/view1') during routing is on proress.

在路由期间你不能使用$ location.path('/ view1')。

it's better to check logged in or not at the level of application stage.

最好在应用程序阶段检查登录或不登录。

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

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

参考:1。AngularJS和location.path()2。根据条件重定向到某个路由3. AngularJS-每个路由和控制器中的登录和身份验证

#2

Your Login link should be a button. The href is overriding your ng-click action.

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

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

Also, you don't need the semicolon inside ng-click.

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

(in-line styles are very bad form, btw)

(内联样式非常糟糕,顺便说一句)

#3

You may use ng-href="#/view1" in your view instead of calling Login method from your controller via ng-click.

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

#1