Angularjs - контроллер вызывает функцию init() несколько раз

У меня проблема, когда я делаю приложение 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 раза. авторизоваться

Узнайте в этом потоке стека, что многие люди также получают эту уязвимость. Все они решаются, убедившись, что контроллер не связывается более одного раза (в routProvider и в шаблоне), и проверьте, что только одно ng-приложение в шаблоне. Мой основной 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");
            }
        }
    });
}]);

Это нормально для этого контроллера, я просто хочу инициализировать текст, но это не нормально для init в некоторых контроллерах, которые требуют некоторый AJAX-запрос на стороне сервера, может сделать слишком много запросов для того, чтобы их отметить. Любой может решить эту проблему, пожалуйста, помогите мне. Благодарю.

PS1. Моя практика основывается на угловых семян https://github.com/angular/angular-seed

PS2. Сначала я также использовал jquery, и он показывал ПРЕДУПРЕЖДЕНИЕ: пытался загрузить угловой более одного раза. Когда я удаляю jquery, он больше никогда не показывает предупреждение, но это не решает мою проблему.

Источник

2 ответа

Решение

Я это уже решаю

<ng-view><ng-view>

используйте это вместо

<div ng-view></div>
Источник

Что касается вашего вызова нескольких методов, вы уверены, что ваш текущий URL точно такой же, как определено в $routeProvider конфиг? (возможно, ngRoute перенаправляет с /login/ в /login и дважды вызывает ваш контроллер)

PS2. Сначала я также использовал jquery, и он показывал ПРЕДУПРЕЖДЕНИЕ: пытался загрузить угловой более одного раза. Когда я удаляю jquery, он больше никогда не показывает предупреждение, но это не решает мою проблему.

AngularJS уже содержит облегченную версию jQuery: jqLite. Если jQuery загружен до Angular, последний будет его использовать. Если нет, используйте встроенную облегченную версию.

В вашем случае ошибка, вероятно, связана с загрузкой jQuery после угловой загрузки. Angular уже загружает свою версию, и вы загружаете ее снова.

Попробуйте загрузить jQuery до Angular или не загружать его вообще.

Источник
Другие вопросы по тегам