了解 AngularJS $compile函数
Understanding the AngularJS $compile function
我尝试使用 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函数打开一个新的弹出窗口
- 将函数的上下文应用于javascript变量
- 如何在JavaScript中将字符串转换为函数引用
- 用嵌套函数和默认函数定义函数
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- 无法导出函数expressjs/requestjs中的变量
- 函数参数中的数据与指定变量之间的任何性能差异
- JQuery合并了keyup和focusout两个函数
- ES6构造函数返回基类的实例
- 在什么情况下需要同时使用compile&链接函数的角度
- Ember 1.10-升级错误-模板必须是一个函数.您是想调用Ember.Handlebars.compile(“..”
- 了解 AngularJS $compile函数
- 如何在使用Jasmine测试工厂时模拟$compile函数
- 如何在Angular中使用$compile将HTML导出到外部函数
- 在Angular链接函数和访问指令参数中使用$compile
- 当使用$compile以编程方式创建指令时,如何调用link函数?
- 使用compile函数向元素添加指令
- 如何将回调函数传递给angularJS控制器中的$compile服务
- AngularJS函数不知道$compile后的新dom元素
- 在Angularjs中,需要帮助理解$compile函数