使用angularjs指令操作dom元素

q8l4jmvw  于 2021-09-29  发布在  Java
关注(0)|答案(0)|浏览(266)

我想管理菜单项上的工具提示位置,为此我编写了一个自定义指令。
指示

angular.module(moduleName).directive('filtersManager', directive);

function directive() {

    return {
        restrict: 'A',
        controller: controller,
        controllerAs: '$ctrl',
        bindToController: true,
        template: template,
        scope: {},
    };

    function template(element, attrs) {
        setBindings(element, attrs);
        return element.html();
    }

    function setBindings(element, attrs) {
        const resetFilterElement = angular.element(element.find('.reset-filters-icon'));
        resetFilterElement.attr('popover-placement', '{{ $ctrl.getResetFilterTooltipPosition($event) }}')
    }

}

控制器

function controller($scope, filtersManagerService, translationService) {

    const $ctrl = this;

    $ctrl.getResetFilterTooltipPosition = getResetFilterTooltipPosition;

    function getResetFilterTooltipPosition() {
        var selectedFilterRow = angular.element(document).find('.flt-selected-filters-list')[1];
        var selectedFilterRowTop = selectedFilterRow.getBoundingClientRect().top;
        return (selectedFilterRowTop <= 130) ? "left" : "auto";
    }

}

export {controller};

在指令中,我使用的是调用setbindings()函数的模板函数,在该函数中,我获取目标dom元素并向该元素添加属性。
我从控制器的顶部开始计算元素位置,然后将相应的值返回到指令以设置工具提示位置。
我想知道是否有一种方法可以在不从模板函数调用setbindings()的情况下更新模板。
非常感谢。

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题