我无法使嵌套嵌入工作。
有两个指令,都声明它们将嵌入它们的内容。当我嵌套它们时,内部没有任何内容。
这里是 this fiddle ,这说明了我的问题。
代码如下:
function Ctrl($scope) {
$scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';
}
angular.module('transclude', [])
.directive('outer', function(){
return {
restrict: 'E',
replace: true,
transclude: true,
scope: {},
template: '<div style="border: 1px solid black;">' +
'<div>Outer</div>' +
'<inner ng-transclude></inner>' +
'</div>'
};
}).directive('inner', function(){
return {
restrict: 'E',
transclude: true,
replace: true,
template :'<div style="border: 1px solid red;">' +
'<div>Inner</div>' +
'<div ng-transclude></div>' +
'</div>'
};
});
最佳答案
你应该在内部指令中使用 ng-transculde,因为 transclude 替换了内部 html
angular.module('transclude', []).directive('outer', function(){
return {
restrict: 'E',
replace: true,
transclude: true,
template: '<div style="border: 1px solid black;">' +
'<div>Outer</div>' +
'<inner><div ng-transclude></div></inner>' +
'</div>'
};
});
无需更改内部指令。
我已经更新了 fiddle here
关于javascript - 如何在 Angular 工作中进行嵌套嵌入?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19430677/