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，以便我可以重用相同的函数并避免在两个指令中声明相同的函数？

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

希望这有帮助！

AngularJS - 指令函数调用指令

1 个答案: