ng-transclude as：元素与属性答案

【问题标题】：ng-transclude as: element vs attributeng-transclude as：元素与属性
【发布时间】：2014-08-25 15:23:28
【问题描述】：

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

【问题讨论】：

标签： javascript angularjs angularjs-directive transclusion angularjs-ng-transclude

【解决方案1】：

仅在最近（因为这个pull request）ngTransclude 指令支持用作element。

您可能正在使用版本 1.3 的 Angular，其中 ngTransclude 用作 element 不支持 - 主要原因是 IE8 support。

【讨论】：