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

指令2

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

如何将myNewDirective中定义的myNewDirective调用为myDirective，以便重用相同的函数并避免在两个指令中声明相同的函数？

P.S.：我不想声明服务中的函数并注入指令。

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

希望这能帮上忙！