Question

我正在尝试variable replacement同时使用ngClick进行点击。

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

标记：

<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);
      });
    }
  };
}]);

问题是：单击按钮时为什么ng-click="setValue('foobar')"不会触发。它应该在输入字段中设置值'foobar'。

Answer 1

Angular不会$compile $sce标记。所以Angular没有处理你的ng-click并附加了指令。

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

一种简单的方法是使用以下指令（在此处找到：https://github.com/angular/angular.js/issues/4992）

使用它你将替换：

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

与

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

并添加此指令：

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

与此同时，这个问题有一个正式的解决方案：

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

可以在不需要编写自定义指令的情况下进行编译。

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

Answer 3

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

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

3 个答案: