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: "="
    }
};

});

musically_ut · Accepted Answer · 2014-03-22 10:28:46Z

2

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

edited Mar 22, 2014 at 10:28

answered Mar 22, 2014 at 10:01

musically_ut

34.3k9 gold badges98 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Himanshu Goel Over a year ago

but i need this tag to be inserted at various positions wherever user defines the annotation.

Himanshu Goel Over a year ago

so i can not declare this tag in html view as it is know after calling the api for annotations.

musically_ut Over a year ago

@user3351458 Updated the answer. Does that bring you a step closer to solving your problem?

Himanshu Goel Over a year ago

sorry, but it doesn't.

Himanshu Goel Over a year ago

Can u tell me how can i inject the compile inside my controller

|

Collectives™ on Stack Overflow

Injecting angular element from controller but not working as directive

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related