爲什麼這個angularjs ui-router代碼崩潰了我的瀏覽器？

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 -component的模板。

如果是這樣，這會導致嵌套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組件 - 除非他們應該被嵌套，在這種情況下，你需要有一些辦法可以阻止遞歸一旦達到預期的嵌套級別。