कोणीय काम में नेस्टेड ट्रांसफर कैसे करें?

Question

मैं नेस्टेड ट्रांसक्यूशन काम नहीं कर सकता।

दो निर्देश हैं, जिनमें से दोनों घोषणा करते हैं कि वे अपनी सामग्री को स्थानांतरित करेंगे। जब मैं उन्हें घोंसला करता हूं, तो आंतरिक में कोई सामग्री नहीं होती है।

यहां 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>' 
    }; 
}); 

Answer 1

आप एनजी-transculde चाहिए भीतरी निर्देश अंदर transclude भीतरी एचटीएमएल बदल देता है के बाद से

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

Answer 2

यह करने के लिए एक और तरीका है, जो स्वयं में उपयोगी हो सकता घटकों निहित अद्यतन किया है 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 पारित करेंगे आंतरिक निर्देश

इस का नकारात्मक पहलू है कि अपने आप में नहीं किया जा सकता और jsfiddle में यह एक ngTransclude: Orphan Directive Error

इस मैं की आवश्यकता है कि inner निर्देश outer निर्देश का एक बच्चा होना वजह से

, कि जिस तरह से यह हमेशा होगा फेंकता है इसे पारित कर दिया गया है।

छोटे लोगों को बड़े निर्देशों को तोड़ना वास्तव में अच्छा है।