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

Question

我有一个指令,它构建一个自动从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适用于绑定到指令的元素的属性,但不适用于外部元素.

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

Answer 1

您可以使用ng-attr，这将是更方便的解决方案。ng-attr-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或$interpolateservice 来评估它们。

.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'))})
            });
        }
    }
})