在不使用templateUrl的指令中添加焦点/模糊事件

Question

自上周五以来，我发现了一个神秘的错误，也许你有一个解释。

我有一个类似的指令定义：

//------------------------------------------------------------------------------
// fl-main-menu
// Type: Element
// Description: Creates a...
//------------------------------------------------------------------------------
uiModule.directive('flNavMenu', ['$rootScope', function ($rootScope) {

//-------------------------
// CONTROLLER
//-------------------------


var componentController = function ($scope, $element, $state, localize, $stateParams, StateManager)
{
    $scope.isMenuOpened = false;

    $scope.buttonsData = [
        {
            name: "Games",
            data: {
                type: "navMenuIconButton",
                label: "menu_Games",
                imgUrl: "./images/ic-controller-w.svg",
                imgUrlOver: "./images/ic-controller-w.svg",
                cb: function () { StateManager.display("gameCategories"); }
            }
        },
        {
            name: "News",
            data: {
                type: "navMenuIconButton",
                label: "News",
                imgUrl: "./images/ic-news-w.svg",
                imgUrlOver: "./images/ic-news-w.svg",
                cb: function () { StateManager.display("newsList", { spaceId: '', newsIndex: 0}); }
            }
        }
    ];

    var updateNavButtons = function (){

        $scope.navButtons = [{
            imgUrl: "./images/ic-menu-w.svg",
            label: "Menu_Close"
        }
        ];

        if(app.fromGame){
            $scope.navButtons.push({
                    imgUrl:   "./images/navBar-ico-Y-w.svg",
                    label: "Btn_BackToGame"
                }
            );
        }
    };
    updateNavButtons();

    $scope.unregisterStageChange = $rootScope.$on('$stateChangeSuccess', function (event) {

        var buttons: any = document.getElementsByClassName('fl-component navmenu-item-button');
        var element : any;

        if ($state.includes("newsList")) {

            if (!$stateParams.spaceId)
                element = buttons[2];
            else
                element = buttons[1];
        }
        else if ($state.includes("main")) {
            element = buttons[0];
        }
        else {
            element = buttons[1];
        }

        if (element) {
            $element[0].children[0]._lastFocusElement = element;
            $element[0].children[0]._focusables = buttons;
        }

    });


    var fromGame = false;
    $scope.app = app;
    $scope.unwatchFromGame = $scope.$watch("app.fromGame", function (newValue, oldValue) {

        if (newValue === fromGame) {
            return;
        }
        updateNavButtons();
    });

    function openCloseMenu()
    {
        if ($element[0].style.display != 'none')
        {
            if ($rootScope.isVideoPlayerOpen)
            {
                $rootScope.$emit("closeVideo");
            }

            if (!$scope.isMenuOpened)
            {
                $scope.onViewOver();
            }
            else
            {
                $scope.onViewOut();
            }
        }
    };

    function isMenuButtonPressed(keyPressed)
    {
        var keyMapping = platform.getKeyMapping();

        if ((platform.isPC() && keyPressed == keyMapping.Space)
            || (platform.isMobile()
            && keyPressed == keyMapping.Enter))
        {
            return true;
        }
        return false;
    };
    function onKeyUp(event)
    {
        if (isMenuButtonPressed(event.keyCode))
        {
            openCloseMenu();
        }
    };

    EventManager.addEventListener(window.document.body, BaseEventType.KEYUP, BaseEventPhase.CAPTURE_PHASE, onKeyUp, this);

    $scope.$on('$destroy', () => {
        $scope.unwatchFromGame();
        $scope.unregisterStageChange();
        $element[0].children[0].onKeyDownEvent = undefined;
        EventManager.removeEventListener(window.document.body, BaseEventType.KEYUP, BaseEventPhase.CAPTURE_PHASE, onKeyUp, this);

        TweenMax.killTweensOf($element[0].children[0]);
        TweenMax.killTweensOf($element[0].children[1]);
    })

};

//-------------------------
// LINK
//-------------------------
var componentLink = function (scope, element)
{
    var offset = 185;
    var menu = element[0].children[0];
    var tongue = element[0].children[1];

    var wrapper = document.getElementById('wrapper');

    /**
     * Close the tongue and open the menu
     */
    scope.onViewOver = function () {
        var width = menu.scrollWidth;
        TweenMax.killTweensOf(menu);
        TweenMax.killTweensOf(tongue);

        //Make the tongue disapear, and the menu appear
        TweenMax.to(tongue, 0.2, { alpha: 0, ease: Quad.easeOut });
        TweenMax.to(menu, 0.2, { alpha: 1, ease: Quad.easeIn });

        //Open menu animation (css transition)
        offset = $rootScope.app.isSnapMode ? 250 : 95;
        if (wrapper) wrapper.style.left = ((width / 2) + offset) + 'px';

        menu.style.left = '0px';
        scope.isMenuOpened = true;
    };

    /**
     * Close the menu and open the tongue
    */
    scope.onViewOut = function () {
        TweenMax.killTweensOf(menu);
        TweenMax.killTweensOf(tongue);

        //Make the menu disapear, and the tongue appear
        TweenMax.to(tongue, 0.2, { alpha: 1.0, ease: Quad.easeIn });
        TweenMax.to(menu, 0.1, { alpha: 0, ease: Expo.easeIn, delay:0.2});

        //Close menu animation (css transition)
        if (wrapper) wrapper.style.left = '0px';

        menu.style.left = '-480px';
        scope.isMenuOpened = false;
    };

    element[0].firstChild.onBlurEvent = scope.onViewOut;
    element[0].firstChild.onFocusEvent = scope.onViewOver;
};

//-------------------------
// TEMPLATE
//-------------------------
var componentTemplate = '<div class="navmenu-wrapper">' +
                            '<div id="navmenu" class="fl-container navmenu navmenu-fixed-left fl-fixed-container">'+
                                '<div>'+
                                    '<ul>' +
                                        '<fl-nav-menu-item ng-repeat="buttonData in buttonsData" nav-item-data="buttonData" class="text - center" id="ID{{$index}}"></fl-nav-menu-item>' +
                                    '</ul>'+
                                    '<ul class="navmenu-nav-icons">' +
                                        '<div ng-repeat="navButton in navButtons" class="navmenu-nav-icon">' +
                                            '<img ng-src="{{navButton.imgUrl}}">' +
                                            '<span>{{navButton.label  | i18n }}</span>' +
                                        '</div>' +
                                    '</ul>'+
                                    '</div>'+
                                    '<div>'+
                                '</div>'+
                            '</div>'+
                            '<img src="./images/btn_drawer_menu.png" class="navmenu-tongue" id="navmenu-tongue">' +
                        '</div>';


//-------------------------
// RETURN
//-------------------------
return {
    restrict: "E",
    controller: ["$scope", "$element", '$state', 'localize', '$stateParams', 'UplayTracking', 'StateManager', componentController],
    link: componentLink,
    template: componentTemplate,
    replace:true
}
}]);

你可以在componentLink方法中看到我们有onFocus / onBlur事件的手动方法：

element[0].firstChild.onBlurEvent = scope.onViewOut;
element[0].firstChild.onFocusEvent = scope.onViewOver;

问题是：如果我为templateUrl更改了该指令的模板（所以将所有html放在一个单独的文件中），当引发onBlur / onFocus事件时，我们的方法不会被调用。你知道为什么吗？谢谢你的帮助！

- 我们使用templateCache加载我们的html模板。 - 我已经验证我的元素[0]是否与没有templateUrl的ou相同，是的，它是相同的元素。