AngulaJs ng-click in expression html

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. http://stackoverflow.com/questions/20297638/call-function-inside-sce-trustashtml-string-in-angular-js/20298466#20298466 — Surjeet Bhadauriya, Nov 11 '16 at 07:32

SURJEET SINGH Bisht · Accepted Answer · 2016-11-11T08:04:23.220

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 '16 at 08:04

answered Nov 11 '16 at 07:01

SURJEET SINGH Bisht

881
10
16

@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 Nov 11 '16 at 07:37
Thanks this is what I was looking for. does it have any other implication on the angular app any side effects ? – User7723337 Nov 11 '16 at 08:28
no never.dont wry about it. it only render the current event – SURJEET SINGH Bisht Nov 11 '16 at 08:32
Will it possible to provide explanation for code: var generated = element.html(myText); $compile(generated.contents())($scope); What this code does exactly. – User7723337 Nov 11 '16 at 08:38

score 1 · Answer 2 · answered Nov 11 '16 at 07:46

1

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>

answered Nov 11 '16 at 07:46

Pitchiah Natarajan

179
10

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. – User7723337 Nov 11 '16 at 07:57

score 0 · Answer 3 · answered Nov 11 '16 at 07:03

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? — User7723337, Nov 11 '16 at 07:51

score 0 · Answer 4 · answered Nov 11 '16 at 07:57

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.

score 0 · Answer 5 · answered Nov 11 '16 at 08:39

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>

AngulaJs ng-click in expression html

5 Answers5

Linked