如何使用AngularJS从json数据中删除链接标记

时间:2015-06-28 20:14:06

标签: javascript json angularjs wordpress

我目前正在从wordpress网站加载JSON数据,如下所示:

"content": "<p>This is text which <a href="#">may have</a> some random links <a href="#">in</a> it.</p>",

控制器

$http.get($scope.postUrl + $stateParams.postID + '?type[]=post')
    .success( function(data){
        $scope.post = data;
    })
    .error( function() {
        $scope.loading = false;
        $scope.errorMessage = "Item could not be found.";
    })
    .then( function() {
        $scope.loading = false;
    });

HTML

<div ng-bind-html="post.content" class="post-content"></div>

我想删除原始“内容”中可能包含的所有链接,最好使用过滤器。还有其他人有类似的情况并提出解决方案吗?

我徒劳地尝试用jquery选择器来定位它们:

$(document).ready(function () { $(".post-content a").contents().unwrap(); });

或在控制器级别:

$scope.$on('$viewContentLoaded', function() { $(".post-content a").contents().unwrap(); });

可能由于未加载内容的时间问题,这些不起作用。

1 个答案:

答案 0 :(得分:2)

这两种尝试都很接近,但只是你想要的。

首先,Angular的element接口没有unwrap方法。如果您正在使用jQuery,请忽略它。如果你不是,你想在Angular之前将jQuery作为依赖项。

其次,您可以在控制器中完成整个操作。剪断:

$http.get($scope.postUrl + $stateParams.postID + '?type[]=post')
.success( function(data){
    var postContent = angular.element(data.content); // This wraps the HTML in jQuery
    postContent.find("a").contents().unwrap(); // Remove a tags
    $scope.post = $('<div>').append(postContent).html(); // Cast to HTML String
})