2015-07-01 99 views
1

(Angular)如何找到在data-ng-bind-html =“post.content”中显示的所有“a”标签?在我发现所有链接的jQuery ajax请求中有一个jQuery函数之前,提取了url并添加了一个onclick函数来打开cordova inappbrowser中的链接。现在,当我运行Angular http请求时,脚本似乎在内容加载到模板之前运行,并且找不到链接。有没有解决方案? (其余内容仍然正确显示)

.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); 
     }); 
    }; 
}); 

我在我的项目中正确包含了jQuery。

UPDATE

我已经远远与我的新功能走到这一步,但事实证明,在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'); 
        }; 
       } 
      } 
     } 
+0

你解析HTML文件,并希望所有标签? – clearScreen

+0

我正在JSON中提取wordpress文章。我想删除包含http/https的所有“href”属性中的url,并将其替换为数字符号“#”,然后在所有“a”标签中插入一个onclick函数,该函数在cordova inappbrowser中打开原始/单独的url来自所有“a”标签。 –

+0

必须有几个完成的代码示例,因为它保持用户在Cordova应用程序“内部”非常重要。如果用户点击一个包含http的链接,他们必须在一个inappbrowser中打开,否则他们会被卡在该网页,而没有链接回应用程序。我认为科尔多瓦应该在他们的代码中实现这样一个功能,该功能可以在一个inappbrowser/system浏览器中自动打开所有的出站url。 –

回答

0

我finnaly想出如何完成我的职责!我在MDN上读过,特定的字符串函数“startsWith”只适用于Firefox和Chrome。请点击此链接:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith 对此的最佳解决方案是创建一个名为startsWith的自定义函数。硒这个问题在这里StackOverflow的进一步说明How to check if a string "StartsWith" another string?

这里是我结束了与代码:

//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'); 

     }; 
     } 
    } 
    } 
}