All geek questions in one place

The controller starts twice

I have a simple controller (logincontroller) that runs twice when loading login.html, but I do not know why this is happening.

Myapp.js:

angular.module('PVM', [
    'Authentication',
    'Modal',
    'ngRoute'
])
.config([
    '$routeProvider', function($routeProvider) {
        $routeProvider
            .when('/Login', {
                controller: 'LoginController',
                templateUrl: 'Login.html'
            })
            .when('/Home', {
                controller: 'ModalController',
                templateUrl: 'Home.html'
            })
            .otherwise({
                redirectTo: '/Login'
            });
    }
]);

LoginController.js:

angular.module("Authentication")
.controller("LoginController",
[
    "$scope", "$rootScope", "$location", "AuthenticationService",
    function($scope, $rootScope, $location, AuthenticationService) {
        AuthenticationService.ClearCredentials();

        $scope.login = function() {

            var foo = "bar"; //Breakpoint hits here twice when loading login.html
        };
    }
    ]);

index.html

<!DOCTYPE html>
<html ng-app="PVM">
<head>
<title>My Ang</title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
<link href="Content/MyCss.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

</head>
<body>
<div>
<div ng-view></div>
</div>


<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular-route.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular-animate.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular-cookies.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>


<script src="Scripts/Services/ModalService.js"></script>
<script src="Scripts/Services/AuthenticationService.js"></script>
<script src="Scripts/Controller/LoginController.js"></script>
<script src="Scripts/Controller/ModalController.js"></script>
<script src="Scripts/MyApp.js"></script>


</body>
</html>

login.html:

<div class="container centeredDiv" ng-controller="LoginController">
    <p>Login page</p>
</div>
+4
source share
2 answers

Since your controller starts in 2 places.

  • From login.html - ng-controller

    <div class="container centeredDiv" ng-controller="LoginController">
    <p>Login page</p>
</div>

  • From the controller associated with the route - / Login

    .when('/Login', {
   controller: 'LoginController',
   templateUrl: 'Login.html'
})

How to fix? You must remove the attribute ng-controllerfrom login.html

+5
source

You do not need the ng controller in your login.html template because it is in your route. Just delete it and this should do the trick.

0

Source: https://habr.com/ru/post/1618619/

More articles:


All Articles