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

我可以使用bootstrap.ui指令tooltip向html元素添加工具提示 e、 g内容有效

但是，我正在为内联编辑创建自己的属性指令。 该指令在使用中类似于以下内容：

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

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

不过，我也希望在mouseenter上的现有标记中添加一个工具提示，使其可见该字段是可编辑的

我尝试过几种方法，比如在link函数中添加tooltip属性，也尝试在compile函数中添加它，但是angular不会将该属性作为指令处理。如何使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();
                        }
                    });
                });
            }
    }
})

指令（“editOnClick”，函数（$compile）{ 返回{ 限制：“A”， 链接：功能（范围、IELENT、iAttrs、控制器）{ var inputC=$compile（“”）（范围）； var输入=输入UTC.eq（0）； var oldsplay，saveFunc=iAttrs.save； 输入模糊（函数（evt）{ if（saveFunc&&scope[saveFunc]）{ 作用域[saveFunc]（函数（）{ css（“显示”、“无”）； css（“display”，oldsplay）； }); } }); IELENT.after（输入）； iElement.click（函数（）{ oldDisplay=iElement.css（“显示”）； css（“显示”、“无”）； css（“显示”、“块”） 输入。单击（）； 输入键控（功能（evt）{ 如果（evt.keyCode===13）{ input.blur（）； } }); }); } } })

---

因此，我可以很容易地向IEElement添加属性，但我需要告诉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语句是必需的，否则它会陷入无限循环。

嘿，Tommy，你知道怎么做吗？嗨，不，我用了另一条路径，就像其他人做内联编辑一样。但我真的很想知道如何告诉angular在动态创建的元素上解析attr，因为我认为这可能在其他时间派上用场。