добавить кнопку «закладка страницы» с угловым

Question

Я видел пару JS фрагменты закладку на страницах, как это: http://www.thewebflash.com/2014/12/how-to-add-cross-browser-add-to.html

В основном они называют другую Js метода в зависимости от браузера, динамически создавать HREF с rel = sidebar в ff или попросите пользователя вручную добавить его, если он не поддерживается в этом браузере.

Мне было интересно, что было бы самым чистым способом добиться этого в угловом приложении? Я искал директиву, которая могла бы ее выполнить, но не могла найти.

Answer 1

Вот простая директива реализации этой функции:

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 и window.loaction с $window и $location, чтобы сделать его легко проверяемым.

В вашем HTML:

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