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

Posted 2023-05-08

【中文标题】如何使指令使用过滤的 HTML 属性？

【英文标题】：How do I make a directive use filtered HTML attributes?

【发布时间】：2015-07-13 21:22:44

【问题描述】：

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

HTML：

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

当我将指令链接到元素时，使用这个 sn-p:

.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 适用于绑定到指令的元素的属性，但不适用于外部元素。

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

【参考方案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、'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')))
            );
        
    
)

【讨论】：

谢谢，@pankjparkar。不幸的是，它对我不起作用。 $(el).attr('ng-attr-data-title')) 和 $(el).attr('data-title')) 都不能完成这项工作。

您是否使用ng-repeat 渲染此元素？

不。它是一个实例。提供菜单项字符串的轮播幻灯片位于 $.each 循环中

@nuton 检查我的编辑，你可以使用$parse

线索是改用$interpolate。感谢您的帮助 - 将您的答案标记为将我推向正确方向的答案。

【参考方案2】：

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

供参考：

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

【讨论】：

一开始我以为：不错 - 我忘记了 transclude！但它也没有工作。你的意思是我应该在每个轮播幻灯片中添加 ng-transclude？​​span>

我希望您必须将 ng-transclude 属性包含到 ...

可以在没有一点嵌入的情况下工作（无论是 js 还是 html）。但请记住，我的指令不会输出模板，它会收集下拉列表的数据。

【参考方案3】：

我猜你已经忽略了编译 html 模板。 试试

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