How I can get a click event

Question

Hello I have bind some HTML elements. Take a look at below code

<DIV ng-bind-html-unsafe="myHTML"></DIV>

In controller code is

$scope.myHTML="<DIV ng-click="myFunc()"></DIV>"
$scope.myFunc= function(){
alert("TEST");
}

here my html is correctly loaded. When I click on the div I am not able to get an alert.

score 0 · Answer 1 · answered Jan 11 '14 at 13:00

0

You have a syntax error in your code:

$scope.myHTML="<DIV ng-click="myFunc()"></DIV>"

You should use single quotes around myFunc(), like this:

$scope.myHTML="<DIV ng-click='myFunc()'></DIV>"

answered Jan 11 '14 at 13:00

Andrew Shustariov

2,530
1
17
17

Khanh TO · Accepted Answer · 2014-01-11T14:06:12.687

0

ng-bind-html-unsafe does not support directive. We have to somehow compile the bound html.

Try compiling it by writing a directive:

app.directive("compile",function($compile,$timeout){
    return {
       priority:-1,
       link:function(scope, element, attrs) {
         $timeout(function(){
           $compile(element.contents())(scope);
         });

       }
    }
});

Use it:

<div ng-bind-html-unsafe="myHTML" compile></div>

DEMO

Another solution is writing our own ng-bind-html

app.directive("myNgBindHtml",function($compile){
    return {
       link:function(scope, element, attrs) {

         scope.$watch(attrs.myNgBindHtml,function(value){
           element.html(value);
           $compile(element.contents())(scope);
         })
       }
    }
});

DEMO

edited Jan 11 '14 at 14:06

answered Jan 11 '14 at 13:01

Khanh TO

48,509
13
99
115

it gives me following error Uncaught Error: selectors not implemented – Shardul Pendse Jan 11 '14 at 13:10
is there any solution in angular js. i have tried to comile it in below format $scope.myHTML = $compile($scope.myHTML)($scope); Its give me output on div as below [[object HTMLDivElement]] – Shardul Pendse Jan 11 '14 at 13:24
@Shardul Pendse: I figured out a solution that works, we have to write another directive to compile it. – Khanh TO Jan 11 '14 at 13:57
hello @KhanhTO thanks for the solution. In my side i fetching the data from DB and then prepared a string of in HTML and then binding it. So how when I console the element.contents(); it is blank. So is there any solution like a call back?? Meaning after the contents are bind then can we call directive. – Shardul Pendse Jan 13 '14 at 03:38
@KhanhTO when I put console.log(element.contents()) in example given by you it prints some objects are bind. How we can figure it out? – Shardul Pendse Jan 13 '14 at 03:45
@Shardul Pendse: in fact, in the first solution, when you call `console.log(element.contents())`, the objects are not bound yet. But because `console.log` is live and passed a reference, it will update the console immediately when the element.contents() changes. Try using alert you will see a different – Khanh TO Jan 14 '14 at 12:43
@Shardul Pendse: I agree that using a callback is a good solution. When I was trying to work out a solution for this question, I also thought about that. I did not figure out how to do that. Using $timeout in this case is not so good, but i think works because the event will be scheduled for the next cycle. I also used `priority:-1` to ensure this is the last directive to run – Khanh TO Jan 14 '14 at 12:49

How I can get a click event

2 Answers2