AngularJS ng-click doesn't fire

Question

I generate some a Tags dynamically from a json file and add them like this to the page:

for(var i = 0; i < currentScene.hotpoints.hotpoint.length; i++)
{
  var hotpoint = currentScene.hotpoints.hotpoint[i];

  var pos = hotpoint.pos.split(";");

  var x = parseFloat(pos[0]) * multiplierX;
  var y = parseFloat(pos[1]) * multiplierY;


  htmlstring += '<a href ng-controller="main" id="hp'+ hotpoint.ID + '" class="hotpoint animated infinite" style="top: ' + parseInt(y) + 'px; left: ' + parseInt(x) + 'px;" ng-click="enterScene(' +hotpoint.sceneID + ',' + hotpoint.ID +')"></a>';

}
$scope.hotpoints = $sce.trustAsHtml(htmlstring);

That works great. Now like you see I want to enable the click event for each element. So I use ng-click. But it doesn't get fired.

When I add this ng-click to an "static" element which is already on the site everything works.

What I have to care about that this works?

Thanks

i guess problem is with ng-controller. Since you are generating this piece of code with ng-controller dynamically, hence angular is not able to bind this ng-controller, that's why ng-click is not firing. — Yogesh
– Yogesh, Commented Jun 16, 2016 at 9:48
Oh the ng-controller in the a tag is only because I wanted to test if this is maybe the error. Without it doesn't work too.. — johnbraum
– johnbraum, Commented Jun 16, 2016 at 9:50

Tirthraj Barot · Accepted Answer · 2016-06-16 09:48:38Z

Yes... $compile shall be used for this..

(function(){
"use strict";
angular.module("CompileDirective", [])
  .directive('dynamicElement', ['$compile', function ($compile) {
      return { 
        restrict: 'E', 
        scope: {
            message: "="
        },
        replace: true,
        link: function(scope, element, attrs) {
            var template = $compile(scope.message)(scope);
            element.replaceWith(template);               
        },
        controller: ['$scope', function($scope) {
           $scope.clickMe = function(){
                alert("hi")
           };
        }]
      }
  }])
  .controller("DemoController", ["$scope", function($scope){
      $scope.htmlString = '<div><input type="button" ng-click="clickMe()" value="click me!"/> </div>';
  }])

}());

With the following HTML:

<div ng-controller="DemoController">
  <dynamic-element message='htmlString'></dynamic-element>
</div>

OR you may also go for injecting $compile in controller..

app.controller('AppController', function ($scope, $compile) {

    var $el = $('<td contenteditable><input type="text" class="editBox" value=""/></td>' +
        '<td contenteditable><input type="text" class="editBox" value=""/></td>' +
        '<td>' +
        '<span>' +
        '<button id="createHost" class="btn btn-mini btn-success" data-ng-click="create()"><b>Create</b></button>' +
        '</span>' +
        '</td>').appendTo('#newTransaction');
    $compile($el)($scope);

    $scope.create = function(){
        console.log('clicked')
    }
})

And the easiest way..

$("#dynamicContent").html(
  $compile(
    "<button ng-click='count = count + 1' ng-init='count=0'>Increment</button><span>count: {{count}} </span>"
  )(scope)
);

After some researching for directives (I'm new to this) it was the solution you provided!

Collectives™ on Stack Overflow

AngularJS ng-click doesn't fire

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related