Finally trying to learn AngularJS and I can't quite figure out how to make components work recursively. I have a simple example that's not rendering as expected.
<body ng-app="myApp" ng-controller="myCtrl as vm">
<nested-list list="vm.list"></nested-list>
</body>
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>
`
});
Undoubtedly because I'm missing something obvious, the list from the app's main controller myCtrl isn't getting bound to the root component. If anyone can provide insight, I'd be grateful.
Stephen
As you are using controllerAs, you should be binding values to controller this(context) instead of binding values to $scope.
.controller('myCtrl', [function() {
var vm = this;
vm.list = [ ..];
}]);