在綁定到AngularJS指令之前修改html的最佳方法

我正在編寫一個AngularJS應用程序，它從服務器獲取帖子列表，然後使用ngRepeat和自定義帖子指令輸出所有帖子。在綁定到AngularJS指令之前修改html的最佳方法

post對象的一部分是一個html blob，我現在通過首先做一個$ sce.trustAsHtml（blob）來添加到指令中，然後使用ng-bind-html指令並傳遞可信的html blob到它。它工作正常，但現在我想在添加到輸出前修改html。例如，我想查找所有鏈接標籤並添加一個target =「_ blank」。我也想刪除任何元素的任何內容可編輯屬性。等等。

這樣做的最好方法是什麼？我正在考慮將它加載到文檔片段中，然後遞歸地遍歷所有正在做我需要做的事情的孩子。但我認爲有更好的AngularJS方法來做到這一點？

編輯：

這裏是一個與我有什麼例子codepen： http://codepen.io/niltz/pen/neqlC?editors=101

來源

2014-06-19 niltz

如果你想補充一點，是自己的指令屬性，那麼最好的地方，添加它們是在編譯函數在自定義指令中。

如果它們只是普通的舊屬性，那麼在運行塊中掛接到DOM就沒有任何問題，並且使用jquery添加屬性。

var app = app.module('app',[]); 
app.run(function ($rootScope){ 
     $(document).ready(function() 
       $rootScope.$apply(function(){ 
         $('a').attr('title','cool'); 
       }); 
     }) 
});

如果你想編譯階段之後，但在角度生命週期鏈接階段那麼的好地方做是對，將其放置在身體元件上的指令的控制器功能前添加屬性。

<body ng-controller="bodyCtrl"> 
    </body> 

    app.controller('bodyCtrl', function($element){ 
      $('a', $element).attr('title','cool'); 
    });

在編譯階段的角度將步行DOM樹，匹配的元素的指令，並轉化沿途的HTML。在鏈接階段，指令通常會設置監視處理程序在模型更改時更新視圖。通過在body元素上放置一個指令，它可以確保所有的指令都已經被編譯，但是鏈接階段尚未開始。

來源

2014-06-19 02:24:54 pixelbits

我已經編輯我的問題，以提供我想要的一個例子。我想你可能會得到答案......但是如果你能夠擴大這個範圍，那將會很棒......我認爲我仍然失去了一些東西。 – niltz

您可以通過它創建一個filter和管道（|）您的內容。喜歡的東西：

<p ng-bind="myblob | myCleanupFilter">

你myCleanupFilter會是這個樣子（未測試）：

angular.module('myApp').filter('myCleanupFilter', function() { 
    return function cleanup (content) { 
    content.replace('......') // write your cleanup logic here... 
    }; 
});

來源

2014-06-19 02:34:11 gtramontina

我聽說過濾器可能很慢，所以如果可以的話，我寧願遠離它們。 – niltz

確實。過度使用過濾器不是一個好主意。如果你總是需要進行這種清理，我寧願儘快從服務器，服務（或ngResource工廠）中獲取數據... – gtramontina

這是我真正想要做的事情。我目前有一個使用jQuery的非角度應用程序，我使用一堆jQuery選擇器在將數據放入我的Handlebars模板之前獲取並編輯數據。現在我試圖將它轉換爲AngularJS，我知道Angular有jQueryLite，但它似乎沒有所有的選擇器，我也想知道是否有比使用jQueryLite更加有角度的方式（或加載完整的jQuery可以做到這一點）。 – niltz

在綁定到AngularJS指令之前修改html的最佳方法

回答

相關問題