最后尝试学习 AngularJS，但我不太清楚如何使组件递归工作。我有一个简单的example这没有按预期呈现。
HTML
<body ng-app="myApp" ng-controller="myCtrl as vm">
<nested-list list="vm.list"></nested-list>
</body>
JavaScript
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.list = [
{ "name": "Item 1" },
{ "name": "Item 2",
"subItems": [
{ "name": " Item 2.1" }
]
},
{ "name": "Item 3",
"subItems": [
{ "name": " Item 3.1" },
{ "name": "Item 3.2",
"subItems": [
{ "name": "Item 3.2.1" },
{ "name": "Item 3.2.2" }
]
}
]
}];
}])
.component('nestedList', {
bindings: {
list: '<'
},
template: `
<div ng-repeat="item in $ctrl.list" >
<div> {{item.name}} </div>
<nested-list list="item.subItems"></nested-list>
</div>
`
});
毫无疑问，因为我遗漏了一些明显的东西，应用程序主 Controller myCtrl 中的列表没有绑定(bind)到根组件。如果有人能提供见解，我将不胜感激。
斯蒂芬
最佳答案
当您使用 controllerAs 时，您应该将值绑定(bind)到 Controller this(上下文)，而不是将值绑定(bind)到 $scope。
.controller('myCtrl', [function() {
var vm = this;
vm.list = [ ..];
}]);
关于javascript - AngularJS 1.x 中的递归组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43143307/