ng-click doesn't fire when added post load

Question

I\'m trying to do a variable replacement while also making it clickable with ngClick.

I made a plunker demo (click the button and observe that the input box stays un

Answer 1

Angular doesn't $compile the $sce markup. So Angular hasn't processed your ng-click and attached the directive to it.

In order to use Angular directives inside your string, and have them live, you'll need to send the string to Angular's $compile function.

One easy way to do this is to use the following directive (found here:https://github.com/angular/angular.js/issues/4992)

Using this you'll replace:

<p ng-bind-html="alink"></p>

with

<p compile="alink"></p>

And add this directive:

angularApp.directive('compile', function($compile) {
  // directive factory creates a link function
  return function(scope, element, attrs) {
    scope.$watch(
      function(scope) {
        // watch the 'compile' expression for changes
        return scope.$eval(attrs.compile);
      },
      function(value) {
        // when the 'compile' expression changes
        // assign it into the current DOM
        element.html(value);

        // compile the new DOM and link it to the current
        // scope.
        // NOTE: we only compile .childNodes so that
        // we don't get into infinite loop compiling ourselves
        $compile(element.contents())(scope);
      }
    );
  };

});

Answer 2

In the meanwhile there is an official solution to that problem:

<p translate="varWithDirective" translate-compile></p>

would do the compilation without the need of writing a custom directive.

For more info: https://github.com/angular-translate/angular-translate/issues/184

Answer 3

You created an element outside of angular. I'm not sure how pascalprescht works but you're going to need to tell the element to $compile (docs)