Jak zrobić dyrektywę, używając filtrowanych atrybutów HTML?

Question

Mam dyrektywę, która buduje menu podręczne, które automatycznie zbiera dane z HTML. W rzeczywistości ma on przekształcać zestaw elementów zgodnych z karuzelą Bootstrap w listę. Łapacz jest to, że każdy .item przenosi atrybut z jej wartość ciągu sączy jak w:

HTML:

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

Kiedy odwołuje dyrektywy do elementu, przy użyciu tego fragmentu:

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

Dostaję menu nieprzetworzonych, nieprzetworzonych ciągów znaków w języku HTML:

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

Z tego co rozumiem, attrs. $obserw odnosi się do atrybutów elementu związanego z dyrektywami, ale nie do elementów zewnętrznych.

Jak uzyskać kątowość w celu użycia filtrowanych ciągów znaków? Próbowałem ustawić priorytet na wartości ekstremalne, ale bezskutecznie.

Answer 1

Można użyć ng-attr, że byłoby bardziej wygodne rozwiązanie. ng-attr-data-title dokona oceny interpolacji {{}} & Utwórz atrybut danych-title z wartością.

Zamiast data-title="{{'My string' | myfilter}}" korzystanie ng-attr-data-title="{{'My string' | myfilter}}"

Markup

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

Aktualizacja

Jak otrzymujesz wartość jak {{'My string' | myfilter}}, {{'My string 2' | myfilter}} z interpolacją następnie można użyć $parse lub $interpolate usługi je ocenić.

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

Answer 2

W swoim dyrektywy, trzeba ustawić transclude właściwość prawdziwej i trzeba użyć szablonu HTML z ngTransclude jako atrybut przetwarzać domyślny filtr kątowy wewnątrz znaczników HTML.

Dla porównania:

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

Answer 3

Chyba masz pominąć skompilować szablon HTML. Spróbuj

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