找到你要的答案

Q:How do I make a directive use filtered HTML attributes?

Q:如何使一个指令使用过滤HTML属性?

I have a directive that builds a popup menu which automatically collects data from HTML. It is actually supposed to convert a set of Bootstrap carousel-compliant elements, into a list. A catch is that each .item carries an attribute with its string value filtered, as in:

HTML:

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

When I link the directive to element, using this snippet:

.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')})
            });
        }
    }
})

I get a menu of raw, unprocessed strings used in HTML:

{{'My string' | myfilter}}
{{'My string 2' | myfilter}}

From what I understand, attrs.$observe applies to attributes of the element being bound to directive, but not the external elements.

How do I get angular to use the filtered strings? I tried setting priority to a extreme values, but to no avail.

我有一个指令,建立一个弹出式菜单,自动收集数据从HTML。它实际上是应该转换一组引导盘兼容的元素,变成一个列表。一个catch是,每个项目都带有一个属性,其字符串值被过滤,如:

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')})
            });
        }
    }
})

I get a menu of raw, unprocessed strings used in HTML:

{{'My string' | myfilter}}
{{'My string 2' | myfilter}}

从我的理解,属性。为观察适用于元素被绑定到指令的属性,而不是外部因素。

我如何得到角度使用过滤字符串?我试图设置优先级为极端值,但无济于事。

answer1: 回答1:

You could use ng-attr, that would be more convenient solution. ng-attr-data-title will evaluate interpolation {{}} & create data-title attribute with value.

Instead of using data-title="{{'My string' | myfilter}}" use ng-attr-data-title="{{'My string' | myfilter}}"

Markup

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

Update

As you are getting value like {{'My string' | myfilter}}, {{'My string 2' | myfilter}} with interpolation then you could use $parse or $interpolate service to evaluate them.

.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'))})
            });
        }
    }
})

你可以使用天然属性,会更方便的解决方案。NG ATTR数据标题将评估插值{ { } } &;价值创造数据标题属性。

而不是使用数据标题=“{ {“弦”| myfilter } }“使用NG ATTR数据标题=“{ {“弦”| myfilter } }”

标记

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

更新

你要像{ {我的字符串值| myfilter } },{ { 2 }我的字符串| myfilter }插值然后你可以使用美元或美元进行解析服务评价。

.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'))})
            });
        }
    }
})
answer2: 回答2:

In your directive, you have to set transclude property to true and have to use html template with ngTransclude as attribute to process your default angular filter inside HTML tags.

For reference:

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

在你的指令,你必须设置嵌入属性设置为true,使用HTML模板,ngtransclude属性来处理你的默认角度滤波器在HTML标记。

供参考:

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

answer3: 回答3:

I guess you've omit to compile html template. Try

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

I guess you've omit to compile html template. Try

$compile('
    <div class="item" data-title="{{'My string' | myfilter}}">
       ...
    </div>
')
jquery  html  angularjs  twitter-bootstrap  angularjs-directive