添加＆QUOT;书签页＆QUOT;具有角按钮 [英] add a "bookmark page" button with angular

问题描述

我见过一对夫妇的js代码片断书签页面，像这样的：的 http://www.thewebflash.com/2014/12/how-to-add-cross-browser-add-to.html

I've seen a couple of js snippets to bookmark a page, like this one: http://www.thewebflash.com/2014/12/how-to-add-cross-browser-add-to.html

基本上，他们称之为视浏览器不同的js方法，动态创建一个href与REL在FF =侧边栏，或提示用户手动添加它，如果它不支持该浏览器。

Basically they call different js method depending on the browser, dynamically create an href with rel=sidebar in ff, or prompt the user to manually add it if it's not supported on that browser.

我想知道什么将是一个角度的应用程序来实现这一最彻底的方法？我搜索的结果会达到这一步，但无法找到任何指令。

I was wondering what would be the cleanest way to achieve this in an angular app? I searched for a directive that could accomplish it but couldn't find any.

推荐答案

下面是一个简单的指令实现该功能：

Here is a simple directive implementing that feature:

angular.module("myApp", [])
    .directive("bookmarkPage", function ($window, $location) {
    return {
        restrict: "AEC",
        link: function (scope, element, attrs) {
            $(element).click(function (e) {
                var bookmarkURL = window.location.href;
                var bookmarkTitle = document.title;
                var triggerDefault = false;

                if (window.sidebar && window.sidebar.addPanel) {
                    // Firefox version < 23
                    window.sidebar.addPanel(bookmarkTitle, bookmarkURL, '');
                } else if ((window.sidebar && (navigator.userAgent.toLowerCase().indexOf('firefox') > -1)) || (window.opera && window.print)) {
                    // Firefox version >= 23 and Opera Hotlist
                    var $this = $(this);
                    $this.attr('href', bookmarkURL);
                    $this.attr('title', bookmarkTitle);
                    $this.attr('rel', 'sidebar');
                    $this.off(e);
                    triggerDefault = true;
                } else if (window.external && ('AddFavorite' in window.external)) {
                    // IE Favorite
                    window.external.AddFavorite(bookmarkURL, bookmarkTitle);
                } else {
                    // WebKit - Safari/Chrome
                    alert('Press ' + (navigator.userAgent.toLowerCase().indexOf('mac') != -1 ? 'Cmd' : 'Ctrl') + '+D to bookmark this page.');
                }

                return triggerDefault;
            });
        }

    }
});

不过你可以替换那些窗口和 window.loaction 与 $窗口和 $位置使其容易测试。

在你的HTML：

  <a id="bookmark-this" href="#" title="Bookmark This Page" bookmark-page>Bookmark This Page</a>

这篇关于添加＆QUOT;书签页＆QUOT;具有角按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！