Directive One
myApp.directive("myDirective", function ($compile, $rootScope) {
var linker = function (scope, element, attrs)
{
var myEl3 = angular.element(document.querySelector("#mydiv" + objMode + Id));
myEl3.after($compile("<span id='fullscreen" + objMode + Id + "' ng-show='true' uib-tooltip='Full Screen' tooltip-placement='left' class='fullscreen text-right pad-0 font-10' ><button id='fullscren" + Id + "' ng-click=doFullScreen('" + vlcPlayerId + "')></button></span></span>")($rootScope));
//this function is used for vlcid.
scope.getVLC = function (name) {
if ($window.document[name]) {
return $window.document[name];
}
if ($window.navigator.appName.indexOf("Microsoft Internet") == -1) {
if ($window.document.embeds && $window.document.embeds[name])
return $window.document.embeds[name];
} else {
return $window.document.getElementById(name);
}
}
//this function is used for fullscreen.
scope.doFullScreen = function (vlcPlayer) {
var vlc = scope.getVLC(vlcPlayer);
if (vlc) {
vlc.video.toggleFullscreen();
}
}
};
return {
restrict: "E",
link: linker
};
});
Directive Two
myApp.directive("myNewDirective", function ($compile, $rootScope) {
var linker = function (scope, element, attrs)
{
scope.getVLC = function (name) {
if ($window.document[name]) {
return $window.document[name];
}
if ($window.navigator.appName.indexOf("Microsoft Internet") == -1) {
if ($window.document.embeds && $window.document.embeds[name])
return $window.document.embeds[name];
} else {
return $window.document.getElementById(name);
}
}
scope.doFullScreen = function (vlcPlayer) {
var vlc = scope.getVLC(vlcPlayer);
if (vlc) {
vlc.video.toggleFullscreen();
}
}
};
return {
restrict: "E",
link: linker
};
});
How do I call scope.doFullScreen
defined in myNewDirective
to myDirective
so that I can reuse the same function and avoid declaring same function in two directives?
PS: I do not want to declare the function in service and inject in directive.
You can declare this function in a service and add it with dependency injection, it would be the cleaner way.
myApp.service("directiveService", function ($compile, $rootScope) {
var linker = function (scope, element, attrs)
{
scope.getVLC = function (name) {
if ($window.document[name]) {
return $window.document[name];
}
if ($window.navigator.appName.indexOf("Microsoft Internet") == -1) {
if ($window.document.embeds && $window.document.embeds[name])
return $window.document.embeds[name];
} else {
return $window.document.getElementById(name);
}
}
scope.doFullScreen = function (vlcPlayer) {
var vlc = scope.getVLC(vlcPlayer);
if (vlc) {
vlc.video.toggleFullscreen();
}
}
};
return {
linker: linker
};
});
And you'll keep your directives simple :
myApp.directive("myNewDirective", function (directiveService) {
return {
restrict: "E",
link: directiveService.linker
};
});
Hope this helps !
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.