ng-transclude 为:元素 vs 属性 [英] ng-transclude as: element vs attribute

问题描述

我想创建一个包装器指令，作为列表中通知小部件的框架.在该框架中，我想稍后根据 notif 对象中的属性嵌入一些特定内容.目前我硬编码了一个 div 元素.

我在 index.cshtml 中有以下内容:

<ul><li ng-repeat="notif in allNotifications"><notification-base notification="notif" remove="removeNotification(notif)"><div style="background-color: fuchsia">bla bla</div></通知库>

这是指令规范:

ns.directive("notificationBase", function() {返回 {限制:'E'，替换:真的，转置:真实，templateUrl: '/Scripts/notification-base.html',控制器:'notificationBaseCtrl',范围: {通知:'='，removeNotif: '&remove'}};});

为什么下面的工作，就是在紫红色背景中显示被嵌入的div?

我的通知标题:{{notification.name}}<div ng-transclude id="notificationContent">
<a ng-click="remove()">移除</a>

...但如果我将其用作元素，则紫红色 div 不再显示.

我的通知标题:{{notification.name}}<div id="notificationContent"><ng-transclude></ng-transclude>
<a ng-click="remove()">移除</a>

如果我使用 ng-transclude 作为属性或元素有什么区别.(我使用 Firefox).

解决方案

仅在最近(从此 pull request) ngTransclude 指令支持作为 element 使用.

您可能正在使用 angular 版本 <1.3 其中 ngTransclude 用作 element 不支持 - 主要原因是 IE8 支持.

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.

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>

This is the directive spec:

ns.directive("notificationBase", function() {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        templateUrl: '/Scripts/notification-base.html',
        controller: 'notificationBaseCtrl',
        scope: {
            notification: '=',
            removeNotif: '&remove'
        }
    };
});

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>

...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>

What is the difference if I use ng-transclude as an attribute or an element. (I use Firefox).

解决方案

Only recently (since this pull request) ngTransclude directive supports usage as element.

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屋！