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

Question

我有一个指令，它构建一个弹出式菜单，自动从HTML收集数据。它实际上应该将一组符合引导轮的元素转换成一个列表。一个问题是，每个.item都带有一个字符串值过滤后的属性，如下所示：

HTML：

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

当我将指令链接到元素时，使用以下代码片段：

.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}}

据我所理解，atts.$观察者适用于被绑定到指令的元素的属性，但不适用于外部元素。

如何获得使用过滤字符串的角度？我试着设定一个极值的优先级，但没有结果。

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或$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

在您的指令中，您必须将transclude属性设置为true，并且必须使用以ngTransclude为属性的html模板来处理HTML标记中的默认角度过滤器。

供参考：

http://tutorials.jenkov.com/angularjs/custom-directives.html

Answer 3

我想您省略了编译html模板。试一试

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