0

我可以使用 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 上的现有标签中添加一个工具提示，以使其可见该字段是可编辑的。

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

4

1 回答 1

2

如果我理解您的问题，请尝试此操作。

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

于 2013-11-13T15:56:15.390 回答