ng-transclude as: element vs attribute

I want to create a wrapper directive that would serve as the frame for a notification widget in a list. In that frame I want to transclude later some specific content based on a property from the notif object. Currently I hard coded a div element.

I have the following in index.cshtml:

<div ng-controller="notificationCenterCtrl">
        <li ng-repeat="notif in allNotifications">
            <notification-base notification="notif" remove="removeNotification(notif)">
                <div style="background-color: fuchsia">bla bla</div> 

This is the directive spec:

ns.directive("notificationBase", function() {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        templateUrl: '/Scripts/notification-base.html',
        controller: 'notificationBaseCtrl',
        scope: {
            notification: '=',
            removeNotif: '&remove'

Why does the following work, that is it displays the transcluded div in fuchsia background?

    My notification title: {{}}
    <div ng-transclude id="notificationContent">

    <a ng-click="remove()">Remove</a>

...but if i use it like an element the fuchsia div no longer shows up.

    My notification title: {{}}
    <div id="notificationContent">
    <a ng-click="remove()">Remove</a>

What is the difference if I use ng-transclude as an attribute or an element. (I use Firefox).



Only recently (since this pull request) ngTransclude directive supports usage as element.

You are probably using angular with version < 1.3 where ngTransclude used as element is not supported - the primary reason for this being IE8 support.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.