为什么这个 angularjs ui-router 代码会使我的浏览器崩溃？答案

【问题标题】：Why is this angularjs ui-router code crashing my browser?为什么这个 angularjs ui-router 代码会使我的浏览器崩溃？
【发布时间】：2017-12-29 23:07:48
【问题描述】：

这是我的控制器。到目前为止，出于测试目的，我只想在浏览器中输出“TEST”（不仅在控制台中）

(function () {
'use strict';

angular.module('data')
.controller('MainMenuAppController', MainMenuAppController);

MainMenuAppController.$inject = ['MenuDataService', 'items'];
function MainMenuAppController(MenuDataService, items) {
  var mainList = this;
  mainList.items ='TEST'; console.log(mainList.items);
}

})();

这里是组件：

(function () {
'use strict';

angular.module('data')
.component('cat', {
  templateUrl: 'src/menuapp/templates/template.html',
  bindings: {
    items: '<'
  }
});

})();

模板：

<cat items="mainList.items"></cat>
<ui-view></ui-view>

服务：

(function () {
    'use strict';

    angular.module('data')
    .service('MenuDataService', MenuDataService);

    MenuDataService.$inject = ['$http','$q', '$timeout']
    function MenuDataService($http,$q, $timeout) {
        var service = this;
        var items = [];

        service.getItemsForCategory = function (shortName) {
            var response = $http({
                method: "GET",
                url: (ApiBasePath + "/menu_items.json"),
                params: {
                    category: shortName
                }
            });

            return response;
        };


        service.getAllCategories = function () {

            var deferred = $q.defer();
            $http.get( "http://davids-restaurant.herokuapp.com/categories.json")
            .success(function(data) {
                service.items = data;
                // Wait 2 seconds before returning
                $timeout(function () {
                    deferred.resolve(data);
                    }, 400);
            })
            .error(function() {
                deferred.reject("Failed to get categories");
            });
            //console.log(deferred.promise);
            return deferred.promise;
        };

    }

})();

模块：

(function () {
'use strict';

angular.module('data', ['ui.router']);

})();

路线

(function () {
'use strict';

angular.module('data')
.config(RoutesConfig);

RoutesConfig.$inject = ['$stateProvider', '$urlRouterProvider'];
function RoutesConfig($stateProvider, $urlRouterProvider) {

  // Redirect to home page if no other URL matches
  $urlRouterProvider.otherwise('/');

  // *** Set up UI states ***
  $stateProvider

  // Home page
  .state('home', {
    url: '/',
    templateUrl: 'src/menuapp/templates/home.template.html'
  })

  // Categories
  .state('mainList', {
    url: '/main-list',
    templateUrl: 'src/menuapp/templates/template.html',
    controller: 'MainMenuAppController as mainList',
    resolve: {
      items: ['MenuDataService', function (MenuDataService) { 
        return MenuDataService.getAllCategories();
      }]
    }     
  })


}

})();

嗯，这在控制台中显示“TEST”，但在浏览器中没有显示，几秒钟后浏览器崩溃，没有任何解释。

我做错了什么？

谢谢！

【问题讨论】：

看起来你的猫组件可能有无限递归。
看起来像。但是我该如何解决呢？非常感谢

标签： angularjs service angular-ui-router components

【解决方案1】：

如果我正确理解你的代码，模板

<cat items="mainList.items"></cat>
<ui-view></ui-view>

是您的cat-组件的模板。

如果是这种情况，这会导致嵌套 cat 组件的无限递归，这最有可能导致您的浏览器崩溃。基本上，上述结果会永久生成以下内容（或者直到浏览器崩溃）。

<cat items="mainList.items">
    <cat items="mainList.items">
        <cat items="mainList.items">
            <cat items="mainList.items">
                <cat items="mainList.items">
                ... repeated forever
                </cat>
                <ui-view></ui-view>
            </cat>
            <ui-view></ui-view>
        </cat>
        <ui-view></ui-view>
    </cat>
    <ui-view></ui-view>
</cat>
<ui-view></ui-view>

要修复它，您只需不要在 cat 组件的模板中使用 <cat> 组件 - 除非它们应该是嵌套的，在这种情况下，您需要有一些方法来停止递归一旦达到预期的嵌套级别。

【讨论】：