Ng-click not firing in angularjs?

Question

Here I created sample angular program for button click. but its not firing may i know where i did mistake? can any one help me on this.. thanks

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope, $sce) {
    $scope.buttonHtml = $sce.trustAsHtml("<button ng-click='showMessage(\"foo\")'>click me</button>");
    $scope.showMessage = function(message) {
        alert(message);
    }
    
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
    <div ng-bind-html="buttonHtml"></div>
</div>

you paste html that not compiled angular, that's why ng-click attribute not work — Grundy
– Grundy, Commented Jan 28, 2016 at 9:03

Martijn Welker · Accepted Answer · 2016-01-29 07:16:21Z

2

The problem is that even though the html renders nicely, Angular hasn't actually bound the ng-click to the scope, to do this you have to $compile it first.

var compiledHtml = $compile("<button ng-click='showMessage(\"foo\")'>click me</button>")($scope);

edited Jan 29, 2016 at 7:16

answered Jan 28, 2016 at 9:03

Martijn Welker

5,6151 gold badge19 silver badges26 bronze badges

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

1 Comment

Amir Popovich Over a year ago

While using $compile is the correct approach, $compile returns a link function which after applying on the relevant scope returns DOM elements (and not strings).

Amir Popovich · Accepted Answer · 2016-01-28 09:19:21Z

You will need to compile & link the element with the correct scope and replace the "old element". This should be done with a directive:

HTML:

<div ng-app="myApp" ng-controller="MyCtrl">
  <div replace-with-compiled-html="buttonHtml"></div>
</div>

JS:

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope) {
  $scope.buttonHtml = "<button ng-click='showMessage(\"foo\")'>click me</button>";

  $scope.showMessage = function(message) {
    alert(message);
  }
});

myApp.directive('replaceWithCompiledHtml', function($compile) {
  return {
    compile: function compile(tElement, tAttrs, transclude) {
      return {
        post: function preLink(scope, elem, iAttrs, controller) {
          // use the inherited scope -> get the wanted property via the attributes
          var scopePropName = iAttrs['replaceWithCompiledHtml'];

          // compile the html
          var linkingFunc = $compile(scope[scopePropName]);

          // link it with the correct inherited scope
          linkingFunc(scope, function(newElem) {
            // replace the new compiled element with the previous one
            elem.replaceWith(newElem);
          });
        }
      };
    }
  }
});

JSFIDDLE.

Collectives™ on Stack Overflow

Ng-click not firing in angularjs?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related