Question

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

然而，我正在为内联编辑创建自己的属性指令。该指令在使用中看起来像这样：

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

我的指令edit-on-click只是添加了一个放置输入框的onclick函数并将ng-model设置为与在edit-on-click中相同的名称。当用户按下输入或模糊字段时，将调用save方法。这很有效，还有很多其他指令在做同样的事情。

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

我尝试了几件事，比如在链接函数中添加tooltip属性，并尝试在编译函数中添加它，但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将它解析为指令以获取工具提示。

Answer 1

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

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语句，否则它会陷入无限循环。

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

1 个答案: