AngularJS-指令到指令的函数调用

Question

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.

Answer 1

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 !