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

Question

我有一个指令可以构建一个自动从 HTML 收集数据的弹出菜单。它实际上应该将一组符合 Bootstrap 旋转木马的元素转换为列表。一个问题是每个 .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}}

据我了解，attrs.$observe 适用于绑定(bind)到指令的元素的属性，但不适用于外部元素。

如何获得 Angular 以使用过滤后的字符串？我尝试将优先级设置为极值，但无济于事。

Answer 1

您可以使用ng-attr，那将是更方便的解决方案。 ng-attr-data-title 将评估插值 {{}} 并创建具有值的 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}}, {{'我的字符串 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'))})
            });
        }
    }
})