Question

我对如何从翻译后的字符串生成有效的ui-sref链接感到有点困惑。

我正在使用棱角1.4.9 角度转换2.9.0

这是相关代码

<div ng-bind-html="$scope.getTranslatedText(someObject)"></div>

controller {
   function(value) {
       this.$translate.isPostCompilingEnabled(); // Returns true
       return this.$translate.instant("taskNames."+value.parameters['messageId'], value.parameters);
   }
}

My translation has the following string.

taskInstructions{
    someMessageId: "Here is some text <a ui-sref=\"goSomewhere\">Some more text</a>"
}

我的翻译按预期返回文本，如果我没有ng-bind-html，那么ui-sref就在那里，但是一旦我添加了ng-bind-html，ui-sref就会消失。我已经尝试过编译，但这似乎不起作用，虽然我不确定我是否正确使用它。

我在翻译的输出上尝试了$sce.trustAsHtml，并且在html输出中显示了ui-sref，但实际上并没有链接到任何地方。我觉得我在某个地方缺少一些步骤，但我似乎无法弄清楚我想做什么让ui-sref起作用。

有关最佳实践的建议是什么？

Answer 1

不使用翻译，但也许这会有所帮助。我们使用$sce和$state：

<强> HTML

<section class="adb-layout-row" ng-repeat="post in vm.posts">
  <div class="adb-layout-default">
    <h5><a ng-click="vm.open(post)">{{ post.title }}</a></h5>
    <div ng-bind-html="post.html"></div>
  </div>
</section>

<强> JS

$q.when(getPosts()).then(function(data) {
  vm.posts =  data.posts.map(function(post){
      return {
        title: post.title,
        html: $sce.trustAsHtml(post.description),
        url: post.url
      };
    });
});

angular.extend(vm, {
  open: function(post) {
    $state.go(post.url);
  }
});

如何使用translate和ng-bind-html的组合生成ui-sref链接

1 个答案: