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将评估插值{{}}＆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'))})
            });
        }
    }
})

Answer 2

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

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

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

2 个答案: