2

我有一个 HTML 元素，我用 angular 指令进行了注释，在这种情况下从ngTranslate翻译。ngTranslate 提供了在运行时使用任意角度表达式在翻译字符串中插入值的选项（甚至是用于编译包含指令的子编译选项）。

现在我的问题是我想{{name}}在消息中插入Hello {{name}}一个自定义指令<test blah="'Robert'"></test>。也就是说，最后我希望从下面的示例中获得以下 HTML 作为输出：

<body>
  <div ng-controller="Ctrl">
    <p translate="VARIABLE_REPLACEMENT" translate-values="{ name: '<test blah="'Test'"></test>' }" translate-compile>Hi <span>Hello Robert</span></p>
    <span>Hello Robert</span>
  </div>
</body>

JS代码：

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

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

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

app.controller('Ctrl', ['$scope', function ($scope) {
}]);

app.directive('test',function () {
  return {
    restrict: 'E',
    template: '<span>Hello {{blah}}</span>',
    replace: true,
    scope: {
      blah: '='
    }
  };
});

HTML（相关部分）：

<body>
  <div ng-controller="Ctrl">
    <p translate="VARIABLE_REPLACEMENT" translate-values="{ name: '<test blah="'Robert'"></test>' }" translate-compile></p>
    <test blah="'Robert'"></test>
  </div>
</body>

您可以在此 Plunker 中使用它：http ://plnkr.co/edit/FQZS4eaZVm52sbVzQ1xb?p=preview

问题：通过另一个 HTML 元素的属性传递一个 HTML 元素会导致解析问题"。我试图逃避传入的元素属性的"( \") ，但这似乎也不起作用。如何通过另一个 HTML 元素的属性传递具有属性的 HTML 元素？

4

0 回答 0