angular.module('app') .directive('uiFullscreen', ['uiLoad', '$document', '$window', function(uiLoad, $document, $window) { return { restrict: 'AC', template:'', link: function(scope, el, attr) { el.addClass('hide'); uiLoad.load('https://cdn.washpayer.com/npm/screenfull@4.2.0/dist/screenfull.min.js').then(function(){ // disable on ie11 if (screenfull.enabled && !navigator.userAgent.match(/Trident.*rv:11\./)) { el.removeClass('hide'); } el.on('click', function(){ var target; attr.target && ( target = $(attr.target)[0] ); screenfull.toggle(target); }); $document.on(screenfull.raw.fullscreenchange, function () { scope.$broadcast("fullscreenchange"); if (screenfull.isFullscreen) { el.addClass('active'); }else{ el.removeClass('active'); } }); }); } }; }]);