我想创建一个包装器指令,用作列表中通知小部件的框架。在那个框架中,我想稍后根据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
如果我用作属性或元素有什么区别。(我使用火狐)。