Question

拥有此HTML：

<div messages>
     Some content...
</div>

该指令：

myAppDirectives.directive("messages", function () {
    return {
        restrict: 'A',
        templateUrl: '/directives/messages/messages.html',
        link: function (scope, elem, attrs) {
            //...
        }
    };
});

和messages.html：

<p>message1</p>
<p>message2</p>

我的html内容被指令模板取代，但我希望它只是附加。

Html变成了这个：

<div messages>
    <p>message1</p>
    <p>message2</p>
</div>

但我喜欢这个：

<div messages>
    <p>message1</p>
    <p>message2</p>
    Some content...
</div>

如果不使用ng-include，这是否可行？

Answer 1

这看起来像是使用ngTransclude的完美情况。尝试：

myAppDirectives.directive("messages", function () {
    return {
        restrict: 'A',
        transclude: true,
        templateUrl: '/directives/messages/messages.html',
        link: function (scope, elem, attrs) {
            //...
        }
    };
});

messages.html：

<p>message1</p>
<p>message2</p>
<ng-transclude></ng-transclude>

Answer 2

如果您确实需要此行为，请使用transclusion：

myAppDirectives.directive("messages", function () {
    return {
        restrict: 'A',
        transclude: true,
        templateUrl: '/directives/messages/messages.html',
        link: function (scope, elem, attrs) {
            //...
        }
    };
});

模板变为：

<p>message1</p>
<p>message2</p>
<span ng-transclude></span>

<div messages>元素的原始内容将包含在<span ng-transclude>中，但这不应该受到伤害。

在指令模板后添加html内容

2 个答案: