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

时间:2014-12-18 16:48:51

标签: angularjs angularjs-directive transclusion

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

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

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

0 个答案:

没有答案