Angular Marked和Inappbrowser在系统浏览器中打开所有链接

Question

我正在开发一个Ionic应用程序，用户可以在其中发布降价内容。 为了使这项工作，我正在使用带角度标记的库。 在该应用程序中，我希望在操作系统的默认浏览器中打开所有markdown链接，因此我做了两件事。

1. 我已经编写了一个角度指令，使用ngCordova包装器为cordova-plugin-inappbrowser强制链接在OS的浏览器中打开。

2. 我已经设置了angular-marked的配置，以使用此指令呈现所有链接。

问题是链接无法在系统浏览器中打开。 它们在当前的WebView中打开。 可能是我的指令不好，或者在这种情况下指令甚至都不是正确的选择。

我正在拧代码吗？ 我该如何解决在系统浏览器中打开链接的问题？

我的指令。

  .directive('fab-extLink', ['$cordovaInAppBrowser', function($cordovaInAppBrowser){

            return {
                restrict: 'A',
                link: function(scope, elem, attrs) {
                    elem.bind('click', function(e) {
                        // Stop the link from opening.
                        e.preventDefault();

                        // Open the link with the operating system browser.
                        $cordovaInAppBrowser.open(attrs.href, '_system');
                    });
                }
            };
    }])

我的配置

.config( [
      '$compileProvider',
      'markedProvider',
      function( $compileProvider, markedProvider)
      {
        $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/);

        // When markdown is rendered use the external link directive.
        markedProvider.setRenderer({
          link: function(href, title, text) {
            return '<a fab-extLink href="' + href + '"' + (title ? ' title="' + title + '"' : '') + '>' + text + '</a>';
          }
        });
      }
    ])

Answer 1

您的代码有两个问题

1.角度指令的名称应为camelCase ，它将在HTML中转换为kebab-case 。 这很容易修复，只需更改

 .directive('fab-extLink', ['$cordovaInAppBrowser', function($cordovaInAppBrowser){

至

 .directive('fabExtlink', ['$cordovaInAppBrowser', function($cordovaInAppBrowser){

2.在您的情况下，HTML中有一个<a fab-extlink> ，但是angular不会$compile （实例化）它。

这是一个困难的过程（如果您不想用猴子标记角度标记）。

angular-marked使用element.html(marked(text, scope.opts || null)); 要设置元素的内部HTML，它会跳过angular的编译过程，因此不会初始化指令。

一种解决方法是使用全局函数（我知道这不是很优雅）：

在app.run中定义它：

.run(function ($cordovaInAppBrowser) {
  window.openInSystemBrowser=function(link){
     $cordovaInAppBrowser.open(link, '_system');
  };

并配置有角度标记以使用onclick，因此它独立于angular起作用。

markedProvider.setRenderer({
        link: function (href, title, text) {
          return '<a onclick="openInSystemBrowser(\'' + href + '\')"' + (title ? ' title="' + title + '"' : '') + '>' + text + '</a>';
        }
      });

我能想到的另一种方法是分叉和修补有角度的标记。

---

猴子补丁解决方案：

1. 打开angular-marked.js

2. 更换

    element.html(marked(text, scope.opts || null)); 

   与

    element.replaceWith($compile(marked(text, scope.opts || null))(scope)); 

---

更新2

我检查了该仓库，最新版本的带角度标记（v1.2）支持一个名为compile的属性，即可完成此操作。

例如

<marked compile="true">
          # Markdown [Google](http://www.google.com)
          *It works!*
</marked>

因此，总而言之。

---

TLDR版本

1.改变

 .directive('fab-extLink', ...

至

 .directive('fabExtlink', ...

2.将属性compile='true'添加到<marked>指令

Answer 2

如果您正在寻找一种简单的方法来打开带有标记的移动设备上的本机浏览器中的链接，您可以尝试在angular .config中进行设置：

markedProvider.setRenderer({
  link: function(href, title, text) {
    return "<a href='" + href + "'" + (title ? " title='" + title + "'" : '') + " onclick='window.open("+href+", '_system')'" + " target='_system'>" + text + "</a>";
  }
});

然后，您需要在onDeviceReady某个地方绑定一个onDeviceReady函数：

document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
  window.open = cordova.InAppBrowser.open;
}