2017-05-14 2 views
0

Ich verfolge Konsole Fehler bekommen, wenn die URL users/personal oder users/:id:Console Fehler "angular.min.js: 107 Auslöser Range: Maximale Call-Stack-Größe überschritten"

angular.min.js:107 RangeError: Maximum call stack size exceeded.

Seine in Schleife und Seite läuft hängen.

Aber wenn ich Benutzer Formular URL entfernen, funktioniert es gut. wie /users Mein Code ist unten

app.js Datei: -

var app = angular.module('angulardemo', ['ngRoute', 'ngCookies'])  .constant('API_URL', 'http://127.0.0.1:8001')  .config(function ($routeProvider, $locationProvider, $httpProvider) { 
          $httpProvider.defaults.headers.common = {'Content-Type' : 'application/json'};   $httpProvider.defaults.headers.post = {};   $httpProvider.defaults.headers.put = {};   $httpProvider.defaults.headers.patch = {};   $routeProvider   .when('/', { 

        templateUrl : "view/home.html", 
        controller : 'PagesController'   })   .when('/home', { 

        templateUrl : "view/home.html", 
        controller : 'PagesController'   })   .when('/about', { 

        templateUrl : "view/about.html", 
        controller : 'PagesController'   })   .when('/team', { 

        templateUrl : "view/team.html", 
        controller : 'PagesController'   })   .when('/work', { 

        templateUrl : "view/work.html", 
        controller : 'PagesController'   })   .when('/price', { 

        templateUrl : "view/price.html", 
        controller : 'PagesController'   })   .when('/contact', { 

        templateUrl : "view/contact.html", 
        controller : 'PagesController'   }) 
       .when('/register', { 

        controller: 'AuthController', 
        templateUrl: 'view/auth/register.html', 
       }) 
       .when('/login', { 

        controller: 'AuthController', 
        templateUrl: 'view/auth/login.html', 
       })   .when('/users/personal', { 

        controller: 'PersonalController', 
        templateUrl: 'view/users/personal.html', 
       }) 
       .when('/users/edu', { 

        controller: 'EduController', 
        templateUrl: 'view/users/edu.html', 
       }) 
       .when('/users/contact', { 

        controller: 'ContactController', 
        templateUrl: 'view/users/contact.html', 
       }) 
       .when('/users/other', { 

        controller: 'OthersController', 
        templateUrl: 'view/users/other.html', 
       }) 
       .when('/logout', { 
        // templateUrl: " ", 
        resolve : { 
         redirect: function ($routeParams, $location){ 

          sessionStorage.removeItem('auth'); 
          $location.path('/login').replace(); 
         } 
        } 
       })   .otherwise({ 
        redirectTo: '/', 
       }); 
       $locationProvider.html5Mode({ 
        enabled: true, 
        requireBase: false   }); 
       $locationProvider.hashPrefix(''); 

      }).run(['$http', '$cookies', function($http, $cookies) { 

       $http.defaults.headers.post['X-CSRFToken'] = $cookies.csrftoken;  }]); 

und mein Controller ist personal.controller.js

app.controller('PersonalController', function ($scope, AuthService, NavigationService, $http, $location, API_URL){ 

    $scope.navMenu = NavigationService.getNavigation(); 

}); 

und Indexdatei ist index.html

<!DOCTYPE html> 
<html ng-app="angulardemo"> 
    <head> 
     <title>Angular Js | Demo</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="http://angulardemo.com/public/css/w3.css"> 
     <link rel="stylesheet" href="http://angulardemo.com/public/css/auth.css"> 
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway"> 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
     <div ng-controller="NavigationController" ng-if="matchNav == false"> 
      <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>--> 
      <!-- Bootstrap library --> 
      <!--<link rel="stylesheet" href="http://angulardemo.com/node_modules/bootstrap/dist/css/bootstrap.min.css">--> 
      <!--<script src="http://angulardemo.com/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>--> 
      <!-- Bootstrap library ends--> 
     </div> 
     <style> 
     body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif} 
     body, html { 
      height: 100%; 
      line-height: 1.8; 
     } 
     /* Full height image header */ 
     .bgimg-1 { 
      background-position: center; 
      background-size: cover; 
      background-image: url("public/images/mac.jpg"); 
      min-height: 100%; 
     } 
     .w3-bar .w3-button { 
      padding: 16px; 
     } 
     </style> 
    </head> 
<body> 
    <div data-ng-view style="display: inline !important;"></div> 
    <script src="http://angulardemo.com/Http/lib/angular/angular.min.js"></script> 
    <script src="http://angulardemo.com/Http/lib/angular-route.min.js"></script> 
    <script src="http://angulardemo.com/Http/lib/angular-cookies.js"></script> 
    <script src="http://angulardemo.com/Http/app.js"></script> 
    <script src="http://angulardemo.com/Http/factories/auth.factory.js"></script> 
    <script src="http://angulardemo.com/Http/factories/flash.factory.js"></script> 
    <script src="http://angulardemo.com/Http/services/auth.service.js"></script> 
    <script src="http://angulardemo.com/Http/services/navigation.service.js"></script> 
    <script src="http://angulardemo.com/Http/controllers/pages.controller.js"></script> 
    <script src="http://angulardemo.com/Http/controllers/auth/auth.controller.js"></script> 
    <script src="http://angulardemo.com/Http/controllers/navigation.controller.js"></script> 
    <script src="http://angulardemo.com/Http/controllers/users/personal.controller.js"></script> 
    <script src="http://angulardemo.com/Http/controllers/users/edu.controller.js"></script> 
    <!--<script src="http://angulardemo.com/Http/controllers/users/contact.controller.js"></script> 
    <script src="http://angulardemo.com/Http/controllers/users/others.controller.js"></script>--> 
    <!-- Add Google Maps --> 
    <script> 
    // function myMap() 
    // { 
    // myCenter=new google.maps.LatLng(41.878114, -87.629798); 
    // var mapOptions= { 
    //  center:myCenter, 
    //  zoom:12, scrollwheel: false, draggable: false, 
    //  mapTypeId:google.maps.MapTypeId.ROADMAP 
    // }; 
    // var map=new google.maps.Map(document.getElementById("googleMap"),mapOptions); 

    // var marker = new google.maps.Marker({ 
    //  position: myCenter, 
    // }); 
    // marker.setMap(map); 
    // } 
    // Modal Image Gallery 
    function onClick(element) { 
     document.getElementById("img01").src = element.src; 
     document.getElementById("modal01").style.display = "block"; 
     var captionText = document.getElementById("caption"); 
     captionText.innerHTML = element.alt; 
    } 


    // Toggle between showing and hiding the sidebar when clicking the menu icon 
    var mySidebar = document.getElementById("mySidebar"); 

    function w3_open() { 
     if (mySidebar.style.display === 'block') { 
      mySidebar.style.display = 'none'; 
     } else { 
      mySidebar.style.display = 'block'; 
     } 
    } 

    // Close the sidebar with the close button 
    function w3_close() { 
     mySidebar.style.display = "none"; 
    } 
    </script> 
    <!-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script> --> 
<!-- 
To use this code on your website, get a free API key from Google. 
Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp--> 


</body> 
</html> 

und Verzeichnisstruktur ture ist

enter image description here

und NavigationService.js Datei:

app.service('NavigationService', function (AuthService, $location) { 
    /** 
    * 
    * Get All the navigation 
    */ 
    this.getNavigation = function(){ 

     var navMenu = [{title : "ABOUT", url : '/about', show : true}, {title : "TEAM", url : '/team', show : true}, {title : "WORK", url : '/work', show : true}, {title : "PRICING", url : '/price', show : true}, {title : 'CONTACT', url : '/contact', show : true}, ]; 

     if(AuthService.checkLogin()){ 

      navMenu.push({title : 'LOGOUT', url : '/logout', show : AuthService.checkLogin()}); 
     } 
     else{ 

      navMenu.push({title : 'LOGIN', url : '/login', show : !AuthService.checkLogin()}, {title : 'REGISTER', url : '/register', show : !AuthService.checkLogin()}); 
     } 

     return navMenu; 
    } 

    /** 
    * 
    * Get Navigation title 
    */ 
    this.getNavTitle = function(){ 

     var nav = []; 
     angular.forEach(this.getNavigation(), function(navigations, key) { 

      nav.push(navigations.title); 
     }); 

     return nav; 
    } 

    /** 
    * 
    * 
    */ 
    this.matchNavigation = function(){ 

     var route = $location.url().replace('/',''); 
     if(this.getNavTitle().indexOf(route) === -1) return true; 
     else return false; 
    } 
}); 

Irgendwelche Vorschläge?

Bitte beachten Sie den Verzeichnisstrukturlink unten. enter image description here

+0

Nein, Sir, ich habe den Code hochgeladen, den Sie überprüfen können. Ich bin frustriert von den letzten 3 Tagen. Bitte geben Sie jedem die Lösung –

+0

Bitte ändern Sie in 'angular.js' anstelle von' angular.min.js', um eine echte Fehlermeldung zu erhalten, die ausgewertet werden kann. Veröffentlichen Sie den neuen Fehler. – Claies

+0

Ich habe es geändert, um angular.js jetzt Konsolenfehler ist "angular.js: 14525 RangeError: Maximale Call-Stack-Größe überschritten" –

Antwort

0

Dies passiert manchmal, wenn eine enthaltene Datei nicht gefunden wird. Stellen Sie sicher, dass die Datei 'view/users/personal.html' und die Vorlage der Route 'users /: id' existieren und sich an der richtigen Stelle befinden.

+0

Bitte beachten Sie die aktualisierte Verzeichnisstruktur im oben verlinkten Bild –

Verwandte Themen