我有一个指令,它构建一个自动从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适用于绑定到指令的元素的属性,但不适用于外部元素。
如何使用角度来使用已过滤的字符串?我尝试将优先级设置为极值,但无济于事。
答案 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>
')