Ng-transclude as: attribute element vs
I want to create a wrapper directive that will serve as a frame for a notification widget in a list. In this frame, I want to pass some specific content later based on an object property notif
. I am currently hard-coded an element div
.
I have the following in index.cshtml:
<div ng-controller="notificationCenterCtrl">
<ul>
<li ng-repeat="notif in allNotifications">
<notification-base notification="notif" remove="removeNotification(notif)">
<div style="background-color: fuchsia">bla bla</div>
</notification-base>
</li>
</ul>
</div>
This is the specification of the directive:
ns.directive("notificationBase", function() {
return {
restrict: 'E',
replace: true,
transclude: true,
templateUrl: '/Scripts/notification-base.html',
controller: 'notificationBaseCtrl',
scope: {
notification: '=',
removeNotif: '&remove'
}
};
});
Why is the following work being done i.e. displaying the transcluded div
in focus of fuchsia?
<div>
My notification title: {{notification.name}}
<div ng-transclude id="notificationContent">
</div>
<a ng-click="remove()">Remove</a>
</div>
... but if I use it as an element then the fuchsia div doesn't appear anymore.
<div>
My notification title: {{notification.name}}
<div id="notificationContent">
<ng-transclude></ng-transclude>
</div>
<a ng-click="remove()">Remove</a>
</div>
What is the difference if I use ng-transclude
as an attribute or element. (I am using Firefox).
source to share
Only recently (since this pull request ) ngTransclude
does the directive support use element
.
You are probably using angular with version < 1.3
where ngTransclude
used as element
not supported - main reason for this is IE8 support .
source to share