AngularJS錨<a>更換過濾器

Question

我需要AngularJS的過濾器，需要一個字符串，找到錨標記，並用替換HREF：

輸入來自第三方的API，長度是可變的，並可能有在標籤或零個一千實例

樣品輸入是：

<p ng-html-bind="someScopedVariable | replaceAnchor"></p> 

過濾器將是：

angular.module('imApp').filter('replaceAnchor', function() { 
return function(string) { 
    if (string) { 

     /* Sudo code would be: 

     1. find all <a> in string; 
     2. get the value of the href attribute and assign to variable hrefHolder 
     3. replace all href attributes with ng-click="(hrefHolder)"; 
     4. return replaced content; */ 

    } else { 
     return ''; 
    } 
} 

}）

ng-click =「aFunction（'original href value in here'）」;

如果這是基於JQuery的，那麼JQuery會被完全加載（而不是AngularJS jQLite）。 Iv嘗試了$ .each，$ .find和$ .replacewith的組合，目前爲止沒有喜悅。

Answer 1

好的，這裏有很多工作。簡單地用「ng-click」代替href實際上並不會讓「ng-click」神奇地工作。 ng-bind-html只包含原始html，不會編譯它。使用我們的過濾器，我們也可以對html進行角度編譯，使其按預期工作。

首先，這裏是一個工作plunkr。

下面的代碼：

HTML：

<p ng-bind-html="someScopedVariable | replaceAnchor:'sampleFunction':this"></p> 

我們傳遞一些額外的變量過濾器。第一個'sampleFunction'將是您想要與錨點調用的作用域函數的名稱。第二個函數是你想要編譯html的範圍。 this引用當前範圍。

JS：

angular.module('imApp', []) 
.config(function($sceProvider) { 
    $sceProvider.enabled(false); 
}) 
.run(function($rootScope) { 
    $rootScope.someScopedVariable = '<a href="http://google.com">Google</a>'; 
    $rootScope.sampleFunction = function(href) { 
    event && event.preventDefault && event.preventDefault(); 
    alert(href); 
    }; 
}) 
.filter('replaceAnchor', function ($rootScope, $compile) { 
    return function(str, fn, scope) { 

    scope = scope || $rootScope; 

    if (str && fn) { 
     // Create a temporary container that we can use to search for anchor tags 
     var tempContainer = $('<div/>'); 
     tempContainer.html(str); 

     // 1. find all <a> in string. 
     var anchorTags = tempContainer.find('a'); 

     anchorTags.each(function() { 
     // 2. get the value of the href attribute and assign to variable hrefHolder 
     var hrefHolder = $(this).attr('href'); 

     // 3. replace all href attributes with ng-click="(hrefHolder)"; 
     $(this).attr('ng-click', fn + '(\'' + hrefHolder + '\')'); 
     }); 

     // 4. return replaced content 
     return $compile(tempContainer.html())($rootScope); 

    } else { 
     return str; 
    } 
    } 
}); 

有一些樣板在那裏，但我在離開它，因爲它是理解發生了什麼非常重要。我們來看看過濾器...

我們正在返回的過濾器函數有三個參數：原始html，函數名稱和範圍。如果範圍未被傳遞，將使用$ rootScope。首先，我創建一個臨時容器來保持事物清潔，並且只有一個根元素。然後我將傳入的原始html附加到該臨時容器。然後，我們可以像我們通常那樣使用jQuery來循環所有錨點標記，獲取它們的href，並創建一個新的ng-click屬性，該屬性調用我們使用href傳入的函數名稱，因爲它只是參數。最後，我們返回已編譯的新html，以實現ng-click。

您可以將函數名稱始終硬編碼到過濾器中，但我喜歡將事物重複使用。