AngularJS-指令到指令的函數調用

Question

指令一

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
    };
});

指令二

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
    };
});

如何將scope.doFullScreen定義的myNewDirective調用為myDirective以便可以重用相同的函數並避免在兩個指令中聲明相同的函數？

PS：我不想在服務中聲明函數並在指令中注入。

Answer 1

您可以在服務中聲明此函數，並通過依賴注入將其添加，這將是一種更簡潔的方法。

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
    };
});

而且您將使指令保持簡單：

myApp.directive("myNewDirective", function (directiveService) {

    return {
        restrict: "E",
        link: directiveService.linker
    };
});

希望這可以幫助 ！