1

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-app が 1 つだけであることを確認することで解決されました。このような私のメインの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 要求を必要とする一部のコントローラーでの初期化では問題があり、注目すべき要求が多すぎる可能性があります。誰でもこれを解決できます私を助けてください。ありがとう。

PS1。angular-seed の私の練習ベースhttps://github.com/angular/angular-seed

PS2。最初は、jquery も使用しましたが、警告: 角度を複数回ロードしようとしました。jquery を削除すると、再度警告が表示されることはありませんが、問題は解決しませんでした

4

2 に答える 2