Angularjs 在爱奥尼亚应用程序中使用系统浏览器打开所有链接

我需要在系统浏览器中打开应用程序某个部分内的所有链接。诀窍是这些链接来自外部源（API），因此我无法添加帮助我从外部打开链接的

ng click

函数

我正在使用应用程序内浏览器插件（ng cordova）。事实上，我有其他外部打开的链接，但在这种情况下，链接可以位于内容的任何部分，因此我的问题是，在加载链接后，如何将ng click指令添加到所有链接？或者，如果可能，如何配置应用程序内浏览器插件以打开系统浏览器中的所有链接

顺便说一句，这些简单的链接即使在iApp浏览器中也不会打开：我点击它们，什么也没发生

---

感谢您的帮助。

AFAIK没有自动执行的方法，您必须使用应用程序内浏览器js代码在每个平台上一致地从外部打开链接

您的问题没有给出服务器返回内容的明确示例，因此我假设您得到的是完整的html块，并且只是在屏幕上呈现它。假设一个请求返回一些基本信息，如：

<div id="my-links">
   <a href='http://externallink.com'> External Link 1 </a>
   <a href='http://externallink.com'> External Link 2 </a>
   <a href='http://externallink.com'> External Link 3 </a>
</div>

如果您可以访问服务器端并可以进行更改：

向请求中添加“inappbrowser”参数，以检测它是否应返回与inappbrowser兼容的链接，并将服务器的响应更改为类似以下内容：

if (inappbrowser) {
<div id="my-links">
   <div ng-click='openExternal($event)' data-external='http://externallink.com'> External Link 1 </div>
   <div ng-click='openExternal($event)' data-external='http://externallink.com'> External Link 2 </div>
   <div ng-click='openExternal($event)' data-external='http://externallink.com'> External Link 3 </div>
</div>
} else {
 <div id="my-links">
   <a href='http://externallink.com'> External Link 1 </a>
   <a href='http://externallink.com'> External Link 2 </a>
   <a href='http://externallink.com'> External Link 3 </a>
</div>
}

如果无法更改服务器端

解析响应并用ng单击替换链接：

$http.get('givemelinks').success(function(htmlData){
   htmlData = htmlData.replace(/href='(.*)'/,'ng-click="openExternal($event)" data-external="$1"').replace(/<a/,"<div").replace(/a>/,"div>")
   $scope.myContent = htmlData;
})

$http.get（'givemelinks'）.success（函数（htmlData）{
htmlData=htmlData.replace（/href='（.*）/，'ng-click=“openExternal（$event）”数据外部=“$1”）。replace（/，“div>”）
$scope.myContent=htmlData；
})

并使用与上述相同的openExternal方法

我正在用div替换锚点，以防止更改应用程序路径。这可能不是每个应用程序都需要的

---

为了更好地实现这一点，您应该将其捆绑在一个

打开外部

指令中，这样您就可以在多个控制器中使用它，并保持它们更干净。

您可以覆盖默认的链接标签功能，如下所示：

---

最好，

因为当涉及角度时，HTML已经呈现，并且inAppBrowser插件只有在显式Javascript调用时才能工作，所以除了手动更改HTML或使用普通Javascript之外，您无法做任何事情

更改HTML只是一个坏主意，尤其是如果您试图使用正则表达式匹配来执行此操作

这就剩下javascript了：

Restangular.all('stories').getList().then(function(stories){
  $scope.stories = stories;
  updateLinks();
});

function updateLinks(){
  //use $timeout wait for items to be rendered before looking for links
  $timeout(function(){
      var $links = document.querySelectorAll(".stories .story a");
      for(var i =0; i < $links.length; i++) {
        var $link = $links[i];
        var href = $link.href;
        console.log("Hijacking link to ", href);
        $link.onclick = function(e){
          e.preventDefault();
          var url = e.currentTarget.getAttribute("href");
          window.cordova.inAppBrowser.open(url, "_system");
        }
      }
    });
}

restanglar.all（'stories'）.getList（）.then（函数（故事）{
$scope.stories=故事；
updateLinks（）；
});
函数updateLinks（）{
//在查找链接之前，请使用$timeout等待呈现项目
$timeout（函数（）{
var$links=document.queryselectoral（“.stories.story a”）；
对于（变量i=0；i<$links.length；i++）{
var$link=$links[i]；
var href=$link.href；
log（“劫持链接到”，href）；
$link.onclick=函数（e）{
e、 预防默认值（）；
var url=e.currentTarget.getAttribute（“href”）；
window.cordova.inAppBrowser.open（url，“_system”）；
}
}
});
}

安装下一个插件：

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git

现在，您可以使用

\u system

、

\u blank

或

\u self

作为目的地：

window.open(url, '_blank');

更多信息：

内部控制器-

---

你说这些链接来自API。那么，为什么不使用Javascript正则表达式在从API获得的字符串中实现基本的搜索和替换呢？这是唯一的方法吗？我的意思是，我可以通过所有元素进行迭代，但我试图避免这种情况，我认为有一种方法可以在全球范围内实现这一点，也许配置应用程序内浏览器插件或类似的东西AA AngularJS不会自动拦截普通JavaScript调用，它不能用角度指令代替它们。我想知道是否可以用inappbrowser实现这一点。事件侦听？当我尝试您的答案时，我仍然无法打开应用程序中的链接。当我将$event.currentTarget.attributes['data-external']记录到控制台时，我看到：

data-external=”http://loremipsum.com/“

Window.open（）

需要一个链接作为第一个参数，而不是前面的

数据外部=

。因此，我将

.value

添加到

$event.currentTarget.attributes['data-external']

中，当我将该（

$event.currentTarget.attributes['data-external'].value

）记录到控制台时，我只看到了链接，更重要的是，当我用它替换

window.open（）

的第一个参数时，我能够打开链接。

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git

window.open(url, '_blank');

 angular.module('app', [])
    .controller('LinkCtrl', function($scope) {
         $scope.openlink = function($event)
            {               
              if ($event.currentTarget && $event.currentTarget.attributes['data-link'])
                    {
                   window.open($event.currentTarget.attributes['data-link'], '_system', 'location=yes');
                    }
                }

    })