Question

我经历过类似的问题，我想我仍然不明白这是怎么回事。

我有以下指令要修改以允许包含：

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，它突然开始工作了。

如何向现有Angular属性指令添加转换？

0 个答案: