NG-transclude为:元素VS属性 [英] ng-transclude as: element vs attribute
问题描述
我想创建一个包装指令,将作为框架以列表的形式通知小部件。在这个框架我想以后transclude根据从 notif
对象属性的一些具体内容。目前,我很难$ C $光盘 DIV
元素。
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.
我的在index.cshtml以下内容:
I have the following in 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'
}
};
});
为什么下面的工作,那就是它显示transcluded DIV
紫红色的背景吗?
Why does the following work, that is it displays the transcluded div
in fuchsia background?
<div>
My notification title: {{notification.name}}
<div ng-transclude id="notificationContent">
</div>
<a ng-click="remove()">Remove</a>
</div>
...但如果我使用它像一个元素紫红色的div不再出现了。
...but if i use it like an element the fuchsia div no longer shows up.
<div>
My notification title: {{notification.name}}
<div id="notificationContent">
<ng-transclude></ng-transclude>
</div>
<a ng-click="remove()">Remove</a>
</div>
有什么区别,如果我使用 NG-transclude
为属性或元素。 (我使用Firefox)。
What is the difference if I use ng-transclude
as an attribute or an element. (I use Firefox).
推荐答案
直到最近(因为这的拉申请) ngTransclude
指令支持用法元素
。
Only recently (since this pull request) ngTransclude
directive supports usage as element
.
您可能正在使用的角度,版本&LT; 1.3
,其中作为元素
ngTransclude
不支持 - 的首要原因是 IE8的支持。
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.
这篇关于NG-transclude为:元素VS属性的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!