Manually set ng-attributes are not recognized by AngularJS

Question

when I set attributes for angular like tooltip-placement AngularJS won´t recognize them.

Consider that code:

demoApp.directive('tooltipView', function () {
    return {
        restrict: 'EA',

        link: function (scope, element, attrs) {
            element.attr("tooltip-placement", scope.placement);
            element.attr("tooltip-html-unsafe", "testtooltip");
            element.attr("tooltip-trigger", "mouseover");
        }
    };
});

The strange thing is when inspecting the DOM with a inspector the DOM shows those attributes but AngularJS doesn't do anything. In this case, it is not showing the tooltip.

How can I force angular to process those attributes?

Answer 1

You can use $compile if you need to process some part of the DOM (some elements and their children) and want to give it a scope.

Usage looks something like

$compile("<div ng-repeat='thing in stuff'>{{thing}}</div>")(someScopeWithStuffProperty)

So you compile a piece of code which calls the compile function for those directives which returns the link function, then for each instance of the link function the scope variable you pass through is used.

There may be some other way to trigger Angular to process some node but this is the only way I've seen so far.

http://plnkr.co/edit/L1AsEvwwVFWg12KFNhDL?p=preview

Answer 2

Link takes action too late, so you are not able to do changes, you'd like to.

use $compile API more info here: