How to find all "a" tags inside an angular $http request

Question

(Angular) How do I locate all "a" tags that is displayed within data-ng-bind-html="post.content"? Before I had a jQuery function in my jQuery ajax requests that found all links, extracted the url and added a onclick function to open link inside cordova inappbrowser. Now when I run an Angular http request the script seems to run before the content have been loaded inside my template, and no links can be found. Is there a solution for this? (The rest of the content is still displayed correctly)

.controller('GuidesDetailCtrl', ['$scope','$http', '$stateParams', function($scope, $http, $stateParams) { 
    $scope.loadpost = function() {
        $scope.loading = true;
        console.log("$stateParams",$stateParams);

       //First request that fetch posts
        var response = $http.get('http:// /?p=' + $stateParams.pid + '&json=1&apikey=');

        response.success(function(data, status, headers, config) {  
            console.log(data);
            $('#start-data').html('');

            //The scope for the post
            $scope.post = data.post;
            //second request that fetches number of likes
            $http.get("http:// /?apikey= &post_vote=1&post_id="+ $stateParams.pid +"")
                .success(function(data, status) {
                    $('.action-like').html("");

                    //The jquery find all links script
                    $('a').each(function() { 
                        alert('run');
                        var url = ($(this).attr('href')); 
                        alert(url);
                        if (url.indexOf('http') == 0) {
                            $(this).css('text-decoration', 'none');
                            $(this).attr('href', '#' );
                            $(this).click(function() {
                                var ref = window.open(url, '_blank', 'location=yes');             
                            });       
                        }
                    });
                    $('#num_likes_'+$stateParams.pid).html(" ("+ data.num_votes+")");
                    $("#like-icn_"+pid).css("color", "#387EF5"); 
                });
            response.error(function(data, status, headers, config) {
                alert('ERROR');
                console.log(data);
            });
            $scope.loading = false;

        });
        response.error(function(data, status, headers, config) {
            $('#start-data').html('<p class="bg-danger" style="text-align: center;">ERROR</p>');
            $('#uclass').html('<p class="text-danger" style="text-align: center;">.</p>');
            console.log(data);
        });
    };
});

I have properly included jQuery in my project.

UPDATE

I have come this far with my new function, but it turns out to not work in safari:

     var allElements = document.getElementsByTagName('a');
       for (var i = 0, n = allElements.length; i < n; i++) {
           var url = allElements[i].getAttribute('href');
           //console.log('el '+allElements[i].getAttribute('href'));
           if(url != null) {
               if(url.startsWith("http")) {

                  console.log("el " + url);
                  allElements[i].innerHTML= ".....";
                  allElements[i].removeAttribute("href");

                  allElements[i].onclick = function() {
                    var ref = window.open(url, '_blank', 'location=yes');
                  };
               }
           }
       }

I am fetching a wordpress post in JSON. And I want to remove the url in all "href " attributes containing http/ https and replace them with a number sign "#", then in all of "a" tags insert a onclick function that opens the original/ individual url in cordova inappbrowser from all "a" tags. — Daniel H, Jul 01 '15 at 11:19
There must be several finished code examples of this because it so important to keep the user "inside" of a Cordova app. If a user clicks on a link containing http they must open in a inappbrowser otherwise they will get stuck at that webpage without a link back to the app. I think that Cordova should have implemented in their code such a function that automatically opens all outbound urls in a inappbrowser/system browser. — Daniel H, Jul 02 '15 at 05:43

score 0 · Accepted Answer · edited May 23 '17 at 10:28

I finnaly figured out how to complete my function! I read over at MDN that the particular string function "startsWith" only works in Firefox and Chrome. Se this link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith The best solution for this is to create a custom function named startsWith. Se this question here at stackOverflow for further instructions How to check if a string "StartsWith" another string?

Here is the code that i ended up with:

//startsWith function from topic above
if (typeof String.prototype.startsWith != 'function') {
   String.prototype.startsWith = function (str){
   return this.slice(0, str.length) == str;
 };
}


function fixCordovaOutboundLinks() {

  var allElements = document.getElementsByTagName('a');

  for (var i = 0, n = allElements.length; i < n; i++) {

    var url = allElements[i].getAttribute('href');

    if(url != null) {

       if(url.startsWith("http")) {   

           console.log("el " + url);
           allElements[i].onclick = function(event) {      
           event.preventDefault();
           alert('URL opens: ' + url);
           var ref = window.open(url, '_blank', 'location=yes');

        };
      }
    }
  }
}

How to find all "a" tags inside an angular $http request

1 Answers1