如何製作指令使用過濾的HTML屬性？

我有一個指令，建立一個自動從HTML收集數據的彈出式菜單。實際上它應該將一組Bootstrap輪播兼容元素轉換爲列表。甲美中不足的是，每個.item攜帶具有其字符串值的屬性過濾，如：如何製作指令使用過濾的HTML屬性？

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適用於綁定到指令的元素的屬性，但不適用於外部元素。

如何獲得角度以使用過濾後的字符串？我試圖將優先級設置爲極端值，但無濟於事。

來源

2015-05-04 user776686

你可以使用ng-attr，這將是更方便的解決方案。 ng-attr-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'))}) 
      }); 
     } 
    } 
})

來源

2015-05-04 13:59:41

謝謝，@pankjparkar。不幸的是，它不適合我。 '$（el）.attr（'ng-attr-data-title'）}）'也不是'$（el）.attr（'data-title'）}）'做這項工作。 – user776686

你是用'ng-repeat'渲染這個元素嗎？ –

沒有。這是一個單一的實例。提供菜單項的字符串幻燈片在'$ .each'循環中被採用 – user776686

在你的指令，你必須transclude屬性設置爲真並有能力使用HTML模板與ngTransclude作爲屬性來處理HTML標籤內默認的角度濾波器。

參考：

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

來源

2015-05-04 13:41:09

起初我以爲：好趕 - 我忘了transclude！但它也沒有效果。你的意思是我應該添加ng-transclude到每個旋轉木馬幻燈片？ – user776686

我希望你必須包含ng-transclude屬性到

...

–

作品沒有一點點的transclusion（無論是js還是html）。請記住，我的指令不會輸出模板，它會爲下拉列表收集數據。 – user776686

我想你已經忽略編譯HTML模板。嘗試

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

來源

2015-05-04 13:49:17 siverprize

如何製作指令使用過濾的HTML屬性？

回答

相關問題