添加后加载时，ng-click不会触发

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

我正在尝试进行变量替换，同时使用ngClick进行可点击。

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

我做了一个plunker演示（点击按钮，观察输入框保持不变）

Markup:

标记：

<body ng-controller="Ctrl">
  <input type="text" id="input" name="input" ng-model="myValue" test>
  <p translate="VARIABLE_REPLACEMENT" translate-values="{{ 'translationData' }}"></p>
  <p ng-bind-html="alink"></p>
</body>

Angular stuff:

角度的东西：

var translations = {
  VARIABLE_REPLACEMENT: 'Hi, {{name}}'
};

var app = angular.module('myApp', ['pascalprecht.translate', 'ngSanitize']);

app.config(['$translateProvider', function ($translateProvider) {
  // add translation table
  $translateProvider.translations(translations);
}]);

app.controller('Ctrl', ['$scope', '$sce', function ($scope, $sce) {
  $scope.translationData = { name: 'foo'};

  $scope.setValue = function(value) {
    $scope.myValue = value;
  };
}]);

app.directive('test', ['$translate', '$sce', function ($translate, $sce) {
  return {
    require: 'ngModel',
    scope: false,
    link: function (scope, element, attrs, ctrl) {
      scope.$watch(attrs.ngModel, function (value) {
        var a = $translate('VARIABLE_REPLACEMENT', {
          name: '<button type="button" ng-click="setValue(\'foobar\')">click me</button>'
        });
        scope.alink = $sce.trustAsHtml(a);
      });
    }
  };
}]);

The question is: Why doesn't ng-click="setValue('foobar')" fire when the button is clicked. It's supposed to set the value 'foobar' in the input field.

问题是：为什么没有ng-click =“setValue（'foobar'）”点击按钮时会触发。它应该在输入字段中设置值'foobar'。

3 个解决方案

#1

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

欲了解更多信息：https：//github.com/angular-translate/angular-translate/issues/184

#2

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

Angular不会$编译$ sce标记。因此Angular没有处理你的ng-click并将指令附加到它。

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.

为了在你的字符串中使用Angular指令并让它们存活，你需要将字符串发送到Angular的$ compile函数。

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

一种简单的方法是使用以下指令（在此处找到：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);
      }
    );
  };

});

}）;

#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)

你创建了一个角度以外的元素。我不确定pascalprescht是如何工作的，但你需要告诉元素$ compile（docs）

#1