CODEWITHSUNDEEP
javascriptjsonangularjswordpress
Adam O'Dwyer
Adam O'Dwyer

Reputation: 41

How to remove link tags from json data using AngularJS

I'm currently loading JSON data from a wordpress website, which looks like this:

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

Controller:

$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>

I want to remove any links that may be in the original 'content', preferably with a filter. Has anyone else had a similar scenario and come up with a solution?

I tried in vain targeting them with a jquery selector:

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

or at the controller level:

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

presumably these didn't work due to timing issues of the content not being loaded.

Upvotes: 2

Views: 1455

Answers (1)

David Souther
David Souther

Reputation: 8174

Both of those attempts are close, but just short of what you want.

First, Angular's element interface does not have the unwrap method. Ignore that if you're using jQuery, which you probably are. If you aren't, you want to pull jQuery in as a dependency before Angular.

Second, you can do your entire operation in the controller. Snipped:

$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
})

Upvotes: 2

Related Questions