Question

我有一个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元素？

通过HTML元素的属性传递带有属性的HTML元素

0 个答案: