Я хочу создать директиву-оболочку, которая будет служить рамкой для виджета уведомлений в списке. В этом фрейме я хочу позже включить определенный контент на основе свойства объекта 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
как атрибут или элемент. (я пользуюсь файрфоксом).