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

【问题标题】：How do I make a directive use filtered HTML attributes?如何使指令使用过滤的 HTML 属性？
【发布时间】：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 适用于绑定到指令的元素的属性，但不适用于外部元素。

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

【问题讨论】：

标签： jquery html angularjs twitter-bootstrap angularjs-directive

【解决方案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>
')

【讨论】：