AngulaJs ng-click in expression html [duplicate]

Question

I am displaying HTML in a AngularJS expression.

In My HTML

<div ng-bind-html="myText"></div>

And In My Controller

$scope.myText = $sce.trustAsHtml("<div class='my-style' ng-click='onClick(10)'>click me</div>"); $scope.onClick = function(value) { console.log("onClick: value:"+value); }

But I am not able to get the click event

UPDATE

In one of the question I see it has be described about how to add HTML tags in the text or how to compile HTML. But my question is related to how to get ng-click event from the complied HTML. I don't see any of the answers providing this solution.

Find for you, go through with this. You have to make directive for it. stackoverflow.com/questions/20297638/… — Surjeet Bhadauriya
– Surjeet Bhadauriya, Commented Nov 11, 2016 at 7:32

SURJEET SINGH Bisht · Accepted Answer · 2016-11-11 08:04:23Z

1

Sorry for again writing the code : First give a unique id to your div :

 <div id="test"></div>

Then Change that code to below one:

 var myText = "<div class='my-style' ng-click='onClick(10)'>click me</div>"; var element = angular.element(document.querySelector('#test')); var generated = element.html(myText); $compile(generated.contents())($scope);

This will manage your code to work. cheers!

edited Nov 11, 2016 at 8:04

answered Nov 11, 2016 at 7:01

SURJEET SINGH Bisht

88110 silver badges16 bronze badges

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

4 Comments

User7723337 Over a year ago

@SURAJEET SINGH Bisht: I am not facing problem with HTML display, I am able to see HTML but I am facing issue related to ng-click I am not able get the click event with inserted HTML code.

User7723337 Over a year ago

Thanks this is what I was looking for. does it have any other implication on the angular app any side effects ?

SURJEET SINGH Bisht Over a year ago

no never.dont wry about it. it only render the current event

User7723337 Over a year ago

Will it possible to provide explanation for code: var generated = element.html(myText); $compile(generated.contents())($scope); What this code does exactly.

Pitchiah Natarajan · Accepted Answer · 2016-11-11 07:46:23Z

Use directive to implement this functionality. Check demo here http://plnkr.co/edit/tTgVCMt7JqvaQOrjhLLL?p=preview

JS:

var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { $scope.testClick = function(value) { alert("onClick: value:"+value); }; }); app.directive("clickDynamic", function(){ return { template:"<div class='my-style' ng-click='testClick(10)'>click me</div>" }; });

HTML:

<body ng-controller="MainCtrl"> <div click-dynamic></div> </body>

Thanks for the example. The HTML text that I am generating is dynamic and it is generated at the runtime (depending on cloud API call response). I need to build this HTML text from controller. and also there are multiple divs which will have this dynamic text.

Raja Ramachandran · Accepted Answer · 2016-11-11 07:03:36Z

I have append the html using id or class var add = angular.element( document.querySelector( '#updatechoose' ) ); add.append('<div class="form-group" ng-repeat="updatedata in getdata">'+ '<div>'+ '<input type="file" id="imgupload" ng-model="attachment" imgepath="{{updatedata.imagepath}}" imgname="{{updatedata.imagename}}" name="file[]" style="padding-left: 15px;" class="imgupload col-md-4 cropit-image-input" />'+ '<i class="glyphicon glyphicon-trash" **ng-click="remove()"**></i>'+ '</div>'+ '</div>');

I tested this way but not able to get the click event in my controller. Can you post working example?
The above example working fine in my project .In html code <div id="updatechoose" style="margin-left: 35%;" class="remove"></div>

Hosar · Accepted Answer · 2016-11-11 07:57:47Z

One solution is to use plain javascript and get the scope. This way you can call your inside methods.

<div ng-bind-html="myText"></div> $scope.myText = $sce.trustAsHtml( '<div class="button" onClick="var scope = angular.element(this).scope();scope.testClick(10);">click me</div>' );

Please note that I'm using onClick instead of ng-click, then I get the scope, this way I can call the inner methods.
It's a dirty solution, but maybe it can help you.

dinony · Accepted Answer · 2016-11-11 08:39:15Z

I've added a snippet, which shows an implementation via a directive and the $compile service.

angular.module('TestApp', []) .directive('compileDir', function($compile) { return { restrict: 'E', scope: { dynTpl: '=' }, template: 'Num clicked: {{numClicked}}', link: function(scope, elem) { scope.numClicked = 0; scope.click = function() { scope.numClicked++; }; var tpl = $compile(scope.dynTpl)(scope); elem.append(tpl); } }; });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.12/angular.min.js"></script> <div ng-app="TestApp"> <compile-dir dyn-tpl="'<button ng-click=\'click()\'>Click</button>'"></compile-dir> </div>

Collectives™ on Stack Overflow

AngulaJs ng-click in expression html [duplicate]

5 Answers 5

4 Comments

1 Comment

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

1 Comment

2 Comments

Comments

Comments

Linked

Related