Question

当网址为users/personal或users/:id时，我收到控制台错误：

angular.min.js：107 RangeError：超出最大调用堆栈大小。

它在循环和页面中运行。

但是，如果我删除用户表单url工作正常。比如/users我的代码在下面

app.js文件： -

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;        }]);

我的控制器是 personal.controller.js

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

    $scope.navMenu = NavigationService.getNavigation();

});

和索引文件是的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>

和目录结构是

enter image description here

和NavigationService.js文件：

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;
    }
});

有什么建议吗？

请参阅下面的目录结构链接。 enter image description here

Answer 1

有时在找不到包含的文件时会发生这种情况。确保文件'view / users / personal.html'和路线'users /：id'的模板存在且位于正确的位置

控制台错误“angular.min.js：107 RangeError：超出最大调用堆栈大小”

1 个答案: