我想创建一个包装指令,用作列表中通知小部件的框架。在该框架中,我想稍后根据 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
作为属性或元素有什么区别。 (我使用火狐)。
最佳答案
直到最近(自此 pull request 起)ngTransclude
指令才支持用作 element
。
您可能使用版本<1.3
的 Angular ,其中ngTransinclude
用作元素
不受支持 -主要原因是IE8 support .
关于javascript - ng 嵌入为 : element vs attribute,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31877857/