I don't understand why the following scenario does not work. Please can
someone explain the issue to me?
Scenario: 2 directives, both have transclude: true, 1 has a template with
the other directives and the ng-transclude directive. This situation
doesn't render the expected result. Using ng-transclude on another element
fixes the issue, but doesn't make my DOM look really nice.
.directive("testTranscludeInner", function () {
return {
restrict: "E",
transclude: true,
scope: true,
template: "<div><hr />1: <div ng-transclude></div></hr /></div>",
link: function (scope, el, attrs) {
scope.name = "TRANSCLUDE1";
}
}
})
.directive("testTranscludeOuter", function () {
return {
restrict: "E",
transclude: true,
scope: true,
template: "<div><hr />2: <test-transclude-inner
ng-transclude></test-transclude-inner></hr /></div>",
link: function(scope, el, attrs) {
scope.name = "TRANSCLUDE2";
}
}
})
and the following HTML
<test-transclude-outer><p>This data should be visible
</p></test-transclude-outer>
Result: does not render the expected result.
If instead the template of testTranscludeOuter is as follows, it does work.
template: "<div><hr />2: <test-transclude-inner><div
ng-transclude></div></test-transclude-inner></hr /></div>",
Looking forward to the reason why it does not work....
Best regards,
CJ de Vos.
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
