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组件 - 除非它们应该嵌套，在这种情况下您需要一旦达到预期的嵌套级别，就会停止递归。

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

1 个答案: