CODEWITHSUNDEEP
javascriptangularjs
Alessio
Alessio

Reputation: 121

How to dynamically add an ng-click to span?

I should add ng-click directive in a dynamically generated span. The span wraps the selected text.

range = window.getSelection().getRangeAt(0);
var span = document.createElement("span");
$(span) .addClass("comment")
           .attr("id", short_id +"_"+ n_comment)
           .attr("ng-click", "showComment()")
           .append(range.extractContents());
range.insertNode(span);

The above code gets the selection and wraps it with the span, but the ng-click doesn't work.
Since the angular directive is dynamically generated, it should be compiled with $compile, but in this case I don't know how to execute the compilation.

How can I solve? Thank you all.

Upvotes: 0

Views: 1028

Answers (1)

Alessio
Alessio

Reputation: 121

I solved by my own with this code:

range = window.getSelection().getRangeAt(0);
var span = document.createElement("span");
$(span) .addClass("comment")
           .attr("id", short_id +"_"+ n_comment)
           .attr("ng-click", "showComment()")
           .append(range.extractContents());
range.insertNode(span);
getScope(span);

And the function getScope:

function getScope(el){
    var $scope = angular.element(el).scope();
    $scope.view(el);
}

In this way I get the scope of the span, and in the view() function I compile the dynamically generated html:

$scope.view = function(element){
    $compile(element)($scope);
}

After compiling the element, ng-click works. Thank you all.

Upvotes: 1

Related Questions