CODEWITHSUNDEEP
javascripttwitter-bootstrapangularjs
Tommy
Tommy

Reputation: 503

add bootstrap.ui tooltip dynamically in my custom directive

I can add tooltip to my html elements using the bootstrap.ui directive tooltip e.g content works.

I am however creating my own attribute directive for inline editing. the directive looks something like this in use:

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

My directive edit-on-click simply adds an onclick function that places an input box and sets the ng-model to the same name as in edit-on-click. When the user presses enter or blurs the field the save method is called. This works perfectly and there is a lot of other directives doing the same thing.

I do however want to also add a tooltip to the existing tag on mouseenter to make it visible that this field is editable.

I've tried several things, like adding the tooltip attribute in the link function and also tried adding it in the compile function, but angular does not process the attribute as a directive. How can I make angular see that there is a new directive on the existing tag?

I do not want to add a tooltip to the original html tag, as this should be a part of the directive.

My directive looks something like this

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();
                        }
                    });
                });
            }
    }
})

So I can easily add an attribute to the iElement, but I need to tell angular to parse it as a directive in order to get the tooltip.

Upvotes: 0

Views: 1108

Answers (1)

mengstrom
mengstrom

Reputation: 233

If I understood your question correclty try this.

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

The if-statement is needed else it would get stuck in an infinite loop.

Upvotes: 2

Related Questions