如何使指令使用过滤的HTML属性?

时间:2015-05-04 13:08:14

标签: jquery html angularjs twitter-bootstrap angularjs-directive

我有一个指令,它构建一个自动从HTML收集数据的弹出菜单。它实际上应该将一组Bootstrap轮播兼容元素转换为一个列表。一个问题是每个.item都带有一个过滤了字符串值的属性,如:

HTML:

<div class="item" data-title="{{'My string' | myfilter}}">
   ...
</div>

当我将指令链接到element时,使用以下代码段:

.directive('sectionBuilder', function(){
    return {
        priority:100,
        restrict: 'C',
        link: function(scope, element, attrs){
            var data = [];
            $('.carousel-inner > .item', '#carousel').each(function(i, el){
                data.push({k: i, v: $(el).attr('data-title')})
            });
        }
    }
})

我得到了HTML中使用的原始未处理字符串菜单:

{{'My string' | myfilter}}
{{'My string 2' | myfilter}}

据我所知,attrs。$ observe适用于绑定到指令的元素的属性,但不适用于外部元素。

如何使用角度来使用已过滤的字符串?我尝试将优先级设置为极值,但无济于事。

2 个答案:

答案 0 :(得分:1)

您可以使用ng-attr,这将是更方便的解决方案。 ng-attr-data-title将评估插值{{}}&amp;使用值创建data-title属性。

而不是使用data-title="{{'My string' | myfilter}}"使用ng-attr-data-title="{{'My string' | myfilter}}"

<强>标记

<div class="item" ng-attr-data-title="{{'My string' | myfilter}}">
   ...
</div>

<强>更新

当您通过插值获得{{'My string' | myfilter}}{{'My string 2' | myfilter}}等值时,您可以使用$parse$interpolate服务来评估它们。

.directive('sectionBuilder', function($interpolate){
    return {
        priority:100,
        restrict: 'C',
        link: function(scope, element, attrs){
            var data = [];
            $('.carousel-inner > .item', '#carousel').each(function(i, el){
                data.push({k: i, v: $interpolate($(el).attr('data-title'))})
            });
        }
    }
})

答案 1 :(得分:0)

我猜您已经省略了编译html模板。 尝试

$compile('
    <div class="item" data-title="{{'My string' | myfilter}}">
       ...
    </div>
')