Injecting angular element from controller but not working as directive

Question

My problem is that a html element needs to be replaced with a directive on event call. So i am calling a function in my controller on click event and appending the angular element at the desired position, that angular element is a directive so i need to do something to make it recognizable as directive. I have tried $compile but that doesn't work at controller level.

My controller Code

angular.element(document.body).append("<annotation></annotation> ");

My Directive code

app.directive("annotation", function($compile){

var linker = function(scope,element, attrs){
    element.html("Done "+attrs.content);

    if(attrs.content){

        $(element).tooltipster({
            content: $("<button class=\"btn btn-primary\">Highlight</button>"),
            animation: 'fade',
            delay: 200,
            interactive: true,
            theme: 'tooltipster-default',
            touchDevices: false,
            trigger: 'hover'
          });
    }

    $compile(element)(attrs);
}

return {
    restrict : "E",
    template: '<div class="highlightor"></div>',
    replace : true,
    link : linker,
    scope: {
        content: "="
    }
};

});

Answer 1

Update: : Something akin to this might work:

.controller('myController', ['$scope', '$compile', function ($scope, $compile) {
    $scope.onClick = function () {
        angular.element(document.body).append(
                $compile("<annotation></annotation>")($scope)
        );
    };
}]);

---

It can be made to work the way you want by injecting $compile into the controller and then doing DOM manipulation therein. However, it is not the correct approach and flouts one of the rules from Zen of Angular .

Do not do DOM manipulations in the Controller.

The Correct Way (TM), IMO, will be to have the click change a boolean flag on the $scope in the controller and then using that boolean flag to switch between the templates:

Template:

<div ng-if="!annotationVisible" ng-click="showAnnotation()">
    Click here to see annotations.
</div>
<div ng-if="annotationVisible"><annotation></annotation></div>

Controller:

$scope.annotationVisible = false;
$scope.showAnnotation = function () { $scope.annotationVisible = true; };