为什么这个 angularjs ui 路由器代码会让我的浏览器崩溃?

Question

这是我的控制器。到目前为止，出于测试目的，我只想在我的浏览器中输出"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"，但不在浏览器中显示，几秒钟后浏览器崩溃，没有任何解释。

我做错了什么？

谢谢！

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