我想管理菜单项上的工具提示位置,为此我编写了一个自定义指令。
指示
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()的情况下更新模板。
非常感谢。
暂无答案!
目前还没有任何答案,快来回答吧!