Angular Marked 和 Inappbrowser 打开系统浏览器中的所有链接 [英] Angular Marked and Inappbrowser opening all links in the system browser

问题描述

我正在开发一个 Ionic 应用程序，用户可以在其中发布降价内容.为了完成这项工作，我使用了 angular-marked 库.在应用程序中，我希望在操作系统的默认浏览器中打开所有降价链接，因此我做了两件事.

I am working on an Ionic app where users can post markdown content. In order to make this work, I am using the angular-marked library. In the app, I want all markdown links to be opened in the OS's default browser so I have done two things.

1. 我编写了一个角度指令，使用cordova-plugin-inappbrowser的ngCordova包装器强制在操作系统的浏览器中打开链接.

1. I have written an angular directive that forces links to open in the OS' browser using the ngCordova wrapper for cordova-plugin-inappbrowser.

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

I have set angular-marked's configuration to render all links using this directive.

问题是链接在系统浏览器中打不开.它们在当前 WebView 中打开.可能是我的指令很糟糕，或者指令在这种情况下甚至不适合使用.

The problem is that the links do not open in the system browser. They open in the current WebView. It might be that my directive is just bad or maybe directives aren't even the right thing to use in this case.

我在代码中做什么?如何解决在系统浏览器中打开链接的问题?

What am I doing wring in my code? How can I fix my issue to open links in the system browser?

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

推荐答案

你的代码有两个问题

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

到

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

2.在您的情况下，您的 HTML 中有 ，但 angular 不会 $compile(实例化)它.

这是一个困难的问题(如果您不想修补角度标记).

2. in your case, there is <a fab-extlink> in your HTML, but angular doesn't $compile (instantiate) it.

This is a difficult one (if you don't want to monkey-patch angular-marked).

angular-marked 使用 element.html(marked(text, scope.opts || null)); 设置元素的内部 HTML，它跳过 angular 的编译过程，所以指令没有初始化..

angular-marked uses element.html(marked(text, scope.opts || null)); to set the inner HTML of the element, it skips angular's compiling process, so directives aren't initialized..

一种解决方法是使用全局函数(我知道不优雅):

One workaround is to use a global function (not elegant I know):

在 app.run 中定义:

Define it in app.run:

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

并配置 angular-marked 以使用 onclick，使其独立于 angular 工作.

and config angular-marked to use onclick, so that it works independent of angular.

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

我能想到的另一种方法是 fork 和 patch angular-marked.

The other way I can think of is to fork and patch angular-marked.

1. 打开angular-marked.js

2. 替换

1. Open angular-marked.js

2. replace

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

与

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

<小时>

更新2

我查看了 repo，最新版本的 angular-marked (v1.2) 支持一个名为 compile 的属性，可以做到这一点.

---

update2

I checked the repo, the newest version of angular-marked (v1.2) supports an attribute called compile, to do exactly that.

例如

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

所以，总而言之..

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

到

 .directive('fabExtlink', ...

这篇关于Angular Marked 和 Inappbrowser 打开系统浏览器中的所有链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！