如何在角度工作中製作嵌套的跨越？

有兩個指令，它們都聲明它們會跨越它們的內容。當我嵌套它們時，內部沒有任何內容。

這裏是this小提琴，這表明我的問題。

下面是代碼：

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>' 
    }; 
});

來源

2013-10-17 manolovnikolay

你應該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>' 
     }; 
});

沒有變化需要內部指令。

我已經更新了小提琴here

來源

2013-10-17 17:27:16

謝謝。現在看起來很明顯。 :) – manolovnikolay

有一點需要注意的是，這種方法增加了額外的標記，如果你正在做一個深層嵌套，可能會有點混亂。 transclude：'element'避免了這一點。但爲了您的使用，可能是好的。 – KayakDave

@KayakDave如果我們刪除這個額外的標記，不管你使用'transclude：element'，外部div的內部html都不會被隱藏。讓我知道如果我錯了。謝謝:) –

另一種方式來做到這一點，這可能是自有用包含的組件顯示在this JSFiddle

.directive('outer', function(){ 
    return { 
     restrict: 'E', 
     replace: true, 
     transclude: true, 
     template: '<div style="border: 1px solid black;">' + 
       '<div>Outer</div>' + 
       '<inner></inner>' + 
       '</div>' 
    }; 
}) 
.directive('inner', function(){ 
    return { 
     restrict: 'E', 
     replace: true, 
     require: '^outer', 
     template :'<div style="border: 1px solid red;">' + 
        '<div>Inner</div>' + 
        '<div ng-transclude></div>' + 
        '</div>' 
    }; 
});

這將通過transclude: true下DOM樹到內部指令。

這樣做的缺點是不能單獨使用，並在的jsfiddle它拋出一個ngTransclude: Orphan Directive Error

因爲這一點，我需要的是inner指令是outer指令的一個孩子，這樣，它永遠會傳遞給它。

將大指令分解爲小指令非常好。

來源

2016-05-03 17:43:02 Sup3rb0wlz

如何在角度工作中製作嵌套的跨越？

回答

相關問題