Question

我在制作angularjs应用时遇到了问题。我创建一个控制器并将其绑定在routeProvider中。使用函数初始化控制器的值，如下所示。

angular.module('app.Login', ['app.rpc','ngRoute'])
.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/login', {
        templateUrl: '/static/tour/app/login/login.html',
        controller: 'loginController'
    });
}])
.controller('loginController', function($scope, $location, rpc) {
    $scope.init = function() {
        $scope.error = "";
        console.log("Login Initialized");
    }
    $scope.init();
});

for login.html就像这样

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <h1 class="page-header">Login</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="alert alert-danger alert-dismissable" role="alert" ng-show="error">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <strong>Error: </strong>
                <span>{{error}}</span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <form>
                <div class="form-group">
                    <label>Username</label>
                    <input type="text" class="form-control" ng-model="username" placeholder="Username">
                </div>
                <div class="form-group">
                    <label>Password</label>
                    <input type="password" class="form-control" ng-model="password" placeholder="Password">
                </div>
                <button class="btn btn-primary action-btn" ng-click="login()">Login</button>
            </form>
        </div>
    </div>
</div>

当我运行应用程序时，它会像这样调用init（）3次。 login

在这个stackoverflow中找出很多人也会得到这个问题。所有这些都通过确保控制器不会多次绑定（在routProvider和模板中）来解决，并检查模板中只有一个ng-app。我的主要HTML是这样的。

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Touring</title>
    <!--Bootstrap-->
    <link rel="stylesheet" href="/static/tour/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/tour/css/bootstrap-theme.min.css">
    <!--/Bootstrap-->
</head>
<body>
    <ng-view><ng-view>
    <!--Angular-->
    <script src="/static/tour/js/angular.min.js"></script>
    <script src="/static/tour/js/angular-route.min.js"></script>
    <script src="/static/tour/js/angular-cookies.min.js"></script>
    <!--/Angular-->
    <!--App-->
    <script src="/static/tour/app/app.js"></script>
    <script src="/static/tour/app/rpc/app-rpc.js"></script>
    <script src="/static/tour/app/login/app-login.js"></script>
    <script src="/static/tour/app/dashboard/app-dashboard.js"></script>
    <script src="/static/tour/app/memo/app-memo.js"></script>
</body>

</html>

对于我这样的主应用程序。

angular.module('app',
    ['ngCookies',
    'ngRoute',
    'app.Login',
    'app.Dashboard',
    'app.Memo',
])
.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/', {
        resolve: {
            "check": function($cookies, $location) {
                if(!$cookies.get("user_id")) {
                    $location.path("/login");
                }
                else {
                    $location.path("/dashboard");
                }
            }
       }
    })
    .when('/logout', {
        resolve: {
            "check": function($cookies, $location) {
                if($cookies.get("user_id")){
                    alert("You have been Logout");
                }
                $cookies.remove("user_name");
                $cookies.remove("user_id");
                $cookies.remove("token");
                $cookies.remove("dbname");
                $location.path("/login");
            }
        }
    });
}]);

这个控制器没问题，我只是想初始化一个文本，但是对于某些需要一些AJAX请求到服务器端的控制器中的init来说不行，可能会发出太多请求注意。任何人都可以解决这个请帮助我。感谢。

PS1。我的练习基于角度种子https://github.com/angular/angular-seed

PS2。起初，我还使用了jquery并显示警告：尝试多次加载角度。一旦我删除jquery它再也不会显示警告，但它没有解决我的问题

Answer 1

关于多方法调用，您确定当前的URL与$routeProvider配置中定义的完全相同吗？（也许ngRoute从/login/重定向到/login并调用您的控制器两次）

PS2。起初，我还使用了jquery并显示警告：尝试多次加载角度。一旦我删除jquery它再也不会显示警告，但它没有解决我的问题

AngularJS已经包含jQuery的精简版：jqLite。如果在Angular之前加载了jQuery，那么最后一个将使用它。如果没有，它使用内置的Lite版本。

在您的情况下，错误可能是由于在 Angular加载之后加载的jQuery。 Angular已经加载了它的版本，你再次加载它。

尝试在Angular之前加载jQuery或者根本不加载它。

Answer 2

我已经解决了

<ng-view><ng-view>

使用此代替

<div ng-view></div>

Angularjs - 控制器多次调用init（）函数

2 个答案: