angularjs – 使用离线应用程序中的系统浏览器打开所有链接

你的问题并没有给出一个清楚的例子,服务器返回什么,所以我假设你正在获得一个完整的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>

您的请求如下所示：

$http.get('givemelinks').success(function(htmlData){
   $scope.myContent = htmlData;
})

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

在您的请求中添加“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>
}

并有一个通用的openExternal方法：

$scope.openExternal = function($event){
  if ($event.currentTarget && $event.currentTarget.attributes['data-external'])
  window.open($event.currentTarget.attributes['data-external'],'_blank','location=yes');
}

如果您无法更改服务器端

解析响应并用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;
})

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

我正在用div替换锚点,以防止更改应用路线.这在每个应用程序中可能不是必需的.

为了使这个更好,你应该把它捆绑在一个开放的外部指令,所以你可以使用它在多个控制器,并保持清洁.