为啥这个 angularjs ui-router 代码会使我的浏览器崩溃？

Posted 2023-02-23

【中文标题】为啥这个 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”，但在浏览器中没有显示，几秒钟后浏览器崩溃，没有任何解释。

我做错了什么？

谢谢！

【问题讨论】：

看起来你的猫组件可能有无限递归。

看起来像。但是我该如何解决呢？非常感谢

【参考方案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> 组件 - 除非它们应该是嵌套的，在这种情况下，您需要有一些方法来停止递归一旦达到预期的嵌套级别。