3

リスト内の通知ウィジェットのフレームとして機能するラッパー ディレクティブを作成したいと考えています。そのフレームでは、後でオブジェクトのプロパティに基づいて特定のコンテンツをトランスクルージョンしたいと考えていnotifます。現在、要素をハードコーディングしていdivます。

私は 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>

これはディレクティブの仕様です:

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

次のように機能するのはなぜdivですか?

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

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

...しかし、要素のように使用すると、フクシアの div が表示されなくなります。

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

ng-transclude属性または要素として使用する場合の違いは何ですか。(私はFirefoxを使用しています)。

4

1 に答える 1