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

【问题标题】：Angularjs - Controller call init() function multiple timesAngularjs - 控制器多次调用init（）函数
【发布时间】：2015-10-27 10:50:37
【问题描述】：

我在制作 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();
});

这样的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。我的实践基于 angular-seed https://github.com/angular/angular-seed

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

【问题讨论】：

移动 $scope.init();到
把这个放到登录页面

标签： javascript jquery angularjs angular-routing angular-controller

【解决方案1】：

我已经解决了

<ng-view><ng-view>

改用这个

<div ng-view></div>

【讨论】：

【解决方案2】：

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

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

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

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

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

【讨论】：

你好保罗，谢谢你的回答。我试图将控制台长时间放在 routeProvider 解析中。 $routeProvider.when('/memo', { resolve: { "check": function($cookies, $location) { console.log("GO TO MEMO"); if(!$cookies.get("user_id") ) { $location.path("/login"); } } }, 控制器: 'memoController', templateUrl: '/static/tour/app/memo/memo.html', });当我去备忘录时，它显示“GO TO MEMO”1次，但仍然初始化3次。