在我的自定义指令中动态添加 bootstrap.ui 工具提示

add bootstrap.ui tooltip dynamically in my custom directive

本文关键字：添加 bootstrap ui 工具提示 动态 我的 自定义 指令      更新时间：2023-09-26

我可以使用bootstrap.ui指令工具提示将工具提示添加到我的html元素中例如，内容有效。

但是，我正在创建自己的属性指令以进行内联编辑。该指令在使用中如下所示：

<h4 ng-bind="model.fieldName" type="text" style="display: inline" edit-on-click="model.fieldName" save="saveFieldName"></h4>

我的指令单击时编辑只是添加一个放置输入框的单击函数并将 ng 模型设置为与单击时编辑中相同的名称。当用户按 Enter 或模糊字段时，将调用保存方法。这非常有效，还有很多其他指令在做同样的事情。

但是，我还想在mouseenter上的现有标签中添加工具提示，以使此字段可见可编辑。

我已经尝试了几件事，例如在链接函数中添加工具提示属性，也尝试将其添加到编译函数中，但 angular 不会将该属性作为指令处理。如何使角度看到现有标签上有新指令？

我不想在原始 html 标签中添加工具提示，因为这应该是指令的一部分。

我的指令看起来像这样

directive("editOnClick", function ($compile) {
    return {
        restrict: 'A',
        link: function (scope, iElement, iAttrs, controller) {
                var inputC = $compile("<input type='" + iAttrs.type + "' ng-model='" + iAttrs.editOnClick + "'>")(scope);
                var input = inputC.eq(0);
                var oldDisplay, saveFunc = iAttrs.save;
                input.blur(function (evt) {
                    if (saveFunc && scope[saveFunc]) {
                        scope[saveFunc](function () {
                            input.css("display", "none");
                            iElement.css("display", oldDisplay);
                        });
                    }
                });
                iElement.after(input);
                iElement.click(function () {
                    oldDisplay = iElement.css("display");
                    iElement.css("display", "none");
                    input.css("display", "block")
                    input.click();
                    input.keyup(function (evt) {
                        if (evt.keyCode === 13) {
                            input.blur();
                        }
                    });
                });
            }
    }
})

所以我可以轻松地向 iElement 添加一个属性，但我需要告诉 angular 将其解析为指令以获取工具提示。

如果我理解你的问题，请尝试这个。

compile: function() {
    return {
    pre: function precompile(scope, element, attrs) {
        if(angular.isUndefined(element.attr('tooltip'))) {
            element.attr('tooltip', 'Click to edit');
            $compile(element)(scope);
        }
    }
};
}

需要 if 语句，否则它会陷入无限循环。

相关文章：