ng-click doesn't work with dynamic html

Question

I create dynamic html in html ng-click doesn't work.. My code is as follow

window.imagePicker.getPictures(
            function(results) {
for (var i = 0; i < results.length; i++) {
                    console.log('Image URI: ' + results[i] + " : " +i);
                     var tmpfileName = results[i].substr(results[i].lastIndexOf('/') + 1);
                     var fileName=i+"_"+tmpfileName

                     var image = document.getElementById('addArea');
                     var DOM_img = document.createElement("img");
                     DOM_img.setAttribute("id",fileName)
                     var cancel_img = document.createElement("img");
                     cancel_img.src="img/Action-cancel-icon.png";
                     cancel_img.setAttribute("id","cancel_"+fileName);
                     cancel_img.alt="no image";

                    cancel_img.setAttribute("ng-click","test()");
                    DOM_img.src=results[i];
                     DOM_img.height="100";
                     DOM_img.width="100";
                     image.appendChild(DOM_img);
                     image.appendChild(temp);
                     convertImgToBase64URL(results[i], function(base64Img){

                     $scope.images.push(base64Img);

                     console.log("Added... id  i " + i);


                    });

                }
})

$scope.test=function()
{
alert("hello")
}

I also tried following code

$scope.myHtml+="<img src='"+results[i]+"' height=100px width=100px ng-click='test()'>";
<div id="addArea" ng-bind-html="myHtml">
</div>

but ng-click not working

How can I solve this?

ng-click doesn't work on image.. I simply write test function when i click on image nothing happened.. How can I do this ? please help me to solve this

You shoudn't create html inside controller. It's not the Angular way. It's better to create a directive for this purpose. docs.angularjs.org/guide/directive — Roman Koliada
– Roman Koliada, Commented Jun 3, 2016 at 8:15
could you also please let us know the test function definition? — Ajanthan Mani
– Ajanthan Mani, Commented Jun 3, 2016 at 8:18

sailens · Accepted Answer · 2016-06-03 10:36:47Z

1

You need to compile your element:

$compile(cancel_img)($scope);

Remember to inject $compile in your controller so you can use it:

someModule.controller('MyController', ['$scope', '$compile', function($scope, $compile) {

  // Your code and the $compile goes here

}]);

edited Jun 3, 2016 at 10:36

answered Jun 3, 2016 at 8:17

sailens

1,6041 gold badge18 silver badges34 bronze badges

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

3 Comments

sailens Over a year ago

@user3855589 Have you injected it?

user3855589 Over a year ago

can you please suggest me how can i do this I add direcives compile but didn't work

sailens Over a year ago

@user3855589 I modified the answer with how to inject it

akiva · Accepted Answer · 2016-06-03 08:17:40Z

0

dynamic html is a contradictory concept to the way angular works.

if all other (2 way binding) means fail and you really must inject html - I would use ngBindHtml

answered Jun 3, 2016 at 8:17

akiva

2,7774 gold badges33 silver badges41 bronze badges

Comments

Phong Nguyen · Accepted Answer · 2016-06-03 08:24:05Z

0

For the reason, attribute of html when you use angularJs such as (ng-click, ng-show, ...) should be enter in html code, because when we run application, compiler will compile attribute such as "ng-click" to javascript before run app

answered Jun 3, 2016 at 8:24

Phong Nguyen

1814 silver badges15 bronze badges

Collectives™ on Stack Overflow

ng-click doesn't work with dynamic html

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related