0

我经历了类似的问题，我想我仍然不明白这应该如何工作。

我有以下指令要修改以允许嵌入：

app.directive('ccWidgetHeader', function() {
    var directive = {
        link: link,
        scope: {
            'title': '@',
            'subtitle': '@',
            'rightText': '@',
            'allowCollapse': '@'
        },
        templateUrl: '/app/layout/widgetheader.html',
        restrict: 'A',
    };
    return directive;

    function link(scope, element, attrs, ctrl, trans) {
        attrs.$set('class', 'widget-head');
    }
});

模板看起来与此类似（还有更多，但为简洁起见，我删除了）：

<div class="page-title pull-left">{{title}}</div>

我正在使用的 HTML 是这样的：

<div data-cc-widget-header title="Last 20 Jobs"
                            allow-collapse="true">
   <span>I want the content here included in my template!</span>
</div>

我以为我可以将“transclude：true”添加到指令中，然后像这样修改模板：

<div class="page-title pull-left">{{title}}<<ng-transclude></ng-transclude></div>

这是我想要渲染的内容：

<div data-cc-widget-header="" title="Last 20 Jobs" allow-collapse="true" class="widget-head"><div class="page-title pull-left ng-binding">Last 20 Jobs
<span>I want the content here included in my template! </span>
</div>

当然，这似乎行不通。我能够找到的所有示例都显示了限制为“E”的嵌入。

编辑：它似乎与我正在运行的 Angular 版本（1.2.X）有关。我升级到 1.3.7，它突然开始工作了。

4

0 回答 0