Angular Marked和Inappbrowser打开系统浏览器中的所有链接 [英] Angular Marked and Inappbrowser opening all links in the system browser
问题描述
我正在开发一个Ionic应用程序，用户可以发布markdown内容。为了使这项工作，我使用有角度标记图书馆。在应用程序中，我想要所有的markdown链接在操作系统的默认浏览器中打开，所以我做了两件事。
-
已经编写了一个angular命令，强制使用ngCordova包装器为cordova-plugin-inappbrowser打开操作系统浏览器中的链接。
-
问题是链接不能在系统浏览器中打开。他们在当前的WebView中打开。这可能是我的指令只是坏，或者指令甚至不是正确的使用在这种情况下。
我在代码中做什么？如何解决我在系统浏览器中打开链接的问题？
我的指令。
.directive（'fab-extLink'，['$ cordovaInAppBrowser'，function（$ cordovaInAppBrowser）{
return {
restrict：'A'，
link：function（scope，elem，attrs）{
elem.bind（'click'，function（e）{
//从链接停止链接
e.preventDefault ;
//使用操作系统浏览器打开链接
$ cordovaInAppBrowser.open（attrs.href，'_system'）;
}）;
}
};
}]）
我的配置
.config（[
'$ compileProvider'，
'markedProvider'，
function（$ compileProvider，markedProvider）
{
$ compileProvider.aHrefSanitizationWhitelist（/ ^ \s *（https？| ftp | mailto | chrome-extension）：/）;
//当渲染markdown时使用external link伪指令。
markedProvider.setRenderer（{
link：function（href，title，text）{
return'< a fab-extLink href ='+ href +'' 'title ='+ title +''：''）+'>'+ text +'< / a>';
}
}
}
]）
您的代码有两个问题
1。角度指令的名称应该在 camelCase 中，它将在HTML中转换为 kebab-case 。这很容易解决，只需更改
.directive（'fab-extLink'，['$ cordovaInAppBrowser'，function $ cordovaInAppBrowser）{
至
.directive（'fabExtlink'，['$ cordovaInAppBrowser'，function（$ cordovaInAppBrowser）{
b $ b
2。在您的情况下，您的HTML中有< a fab-extlink> ，但angular不会 $编译（实例化）它。
这是一个困难的（如果你不想猴子补丁角标记） / p>
角标记使用 element.html（标记（text，scope.opts || null））; 设置元素的内部HTML，它跳过角度的编译过程，所以指令不初始化..
解决方法是使用全局函数（不优雅我知道）：
在app.run中定义它：
.run（function（$ cordovaInAppBrowser）{
window.openInSystemBrowser = function（link）{
$ cordovaInAppBrowser.open（link，'_system'）;
};
并配置角度标记以使用onclick，
markedProvider.setRenderer（{
link：function（href，title，text）{
return'< a onclick =openInSystemBrowser（\''+ href +'\'）'+（title？'title ='+ title +''：''）+'>'+ text +'< / a> ;';
}
}）;
我可以想到的另一种方法是fork和patch角度标记。
猴子补丁解决方案：
-
angular-marked.js -
替换
element.html（marked（text，scope.opts || null））;
element.replaceWith（$ compile（marked（text，scope.opts || null））（scope））;
< h2> update2
我检查了repo，最新版本的angular-marked（v1.2）支持一个属性 compile ，正是这样。
例如
; marked compile =true>
＃Markdown [Google]（http://www.google.com）
*它可以使用！*
< / marked>
因此，在结论中。
<
TLDR版本
1。更改
.directive（'fab-extLink'，...
pre>
到
.directive（'fabExtlink'，.. 。
2。添加属性 compile ='true'到< 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.
I have written an angular directive that forces links to open in the OS' browser using the ngCordova wrapper for cordova-plugin-inappbrowser.
I have set angular-marked's configuration to render all links using this directive.
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?
My Directive.
.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');
});
}
};
}])
My Config
.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>';
}
});
}
])
解决方案 There are two problems with your code
1. the name of an angular directive should be in camelCase, it will be converted to kebab-case in HTML. This is very easy to fix, just change
.directive('fab-extLink', ['$cordovaInAppBrowser', function($cordovaInAppBrowser){
to
.directive('fabExtlink', ['$cordovaInAppBrowser', function($cordovaInAppBrowser){
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 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):
Define it in app.run:
.run(function ($cordovaInAppBrowser) {
window.openInSystemBrowser=function(link){
$cordovaInAppBrowser.open(link, '_system');
};
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>';
}
});
The other way I can think of is to fork and patch angular-marked.
The monkey-patch solution:
- Open
angular-marked.js
replace
element.html(marked(text, scope.opts || null));
with
element.replaceWith($compile(marked(text, scope.opts || null))(scope));
update2
I checked the repo, the newest version of angular-marked (v1.2) supports an attribute called compile, to do exactly that.
e.g.
<marked compile="true">
# Markdown [Google](http://www.google.com)
*It works!*
</marked>
So, in conclusion..
TLDR version
1. change
.directive('fab-extLink', ...
to
.directive('fabExtlink', ...
2. add attribute compile='true' to <marked> directive
这篇关于Angular Marked和Inappbrowser打开系统浏览器中的所有链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
