Reputation: 604
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: "="
}
};
});
Upvotes: 2
Views: 4079
Reputation: 34288
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; };
Upvotes: 2