我尝试使用 AngularJS 构建包含 n 个子菜单的菜单。 这是我的范围:
$scope.menu = [
{"type": "folder", "name": "TestFolder1", "subfolder": []},
{"type": "folder", "name": "TestFolder2", "subfolder": [
{"type": "folder", "name": "TestFolder2", "subfolder": [
{"type": "folder", "name": "TestFolder2", "subfolder": []},
{"type": "folder", "name": "TestFolder2", "subfolder": []}
]},
{"type": "folder", "name": "TestFolder2", "subfolder": []}
]},
{"type": "file", "name": "testfile"}
];
这是我的指令
codeApp.directive('item', ['$compile', function ($compile) {
return {
restrict: 'E',
replace: true,
scope: {
item: '='
},
template: '<li>'+
'<a id="item"><i class="fa fa-code-fork fa-fw"></i>{{item.name}}</a>'+
'</li>',
link: function($scope, $element) {
if (angular.isArray($scope.item.subfolder) && $scope.item.subfolder.length > 0) {
$element.append('<ul><item ng-repeat="childItem in item.subfolder" item="childItem"></item></ul>');
$compile($element.contents())($scope);
}
}
};
}]);
我的第一行是这样的:
<item ng-repeat="item in menu" item="item"></item>
菜单已创建,但仅第一级且 我不确定编译功能是如何工作的。如何才能将该行附加到 后面?
最佳答案
我认为这里已经讨论了类似的问题: https://stackoverflow.com/a/18609594/4360457
答案包括一个 plunkr 示例,并且解释得很好。
关于javascript - 了解 AngularJS $compile 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28110666/