Question

我们有：

<td ... ng-click="someFunction(param)" ...></td>

该函数在controllers.js中的一个控制器中定义：

$scope.someFunction= function (param) { ... }

并且预期param将被翻译为字符串。我尝试了不同的方法，例如：

<td ... ng-click="someFunction('PARAM_TRANSLATION_KEY' | translate)" ...></td>

或：

<td ... ng-click="someFunction({{'PARAM_TRANSLATION_KEY' | translate}})" ...></td>

以及其他人，但似乎没有任何工作，我在angular-translate文档和/或I-net中找不到。

有什么想法吗？

Answer 1

angular translate有一个翻译服务，你可以在你的js代码中使用

https://angular-translate.github.io/docs/#/api/pascalprecht.translate。$翻译

只需将函数传递给

ng-click="someFunction('PARAM_TRANSLATION_KEY')

并使用函数内部的服务：

function(param) {  $translate(param).then(translation) { ... } }

更新：如果您无法更改代码，那么您可以像这样传递参数

将服务添加到范围，以便您可以访问它
使用服务转换并在回调后调用您的函数

示例：

var translations = {
  HEADLINE: 'What an awesome module!',
  PARAGRAPH: 'Srsly!',
  NAMESPACE: {
    PARAGRAPH: 'And it comes with awesome features!'
  }
};

var app = angular.module('myApp', ['pascalprecht.translate']);

app.config(['$translateProvider',
  function($translateProvider) {
    // add translation table
    $translateProvider
      .translations('en', translations)
      .preferredLanguage('en');
  }
]);


app.controller('myController', function($scope, $translate) {
  $scope.translationServiceCallback = function(param, cb) {
    $translate(param).then(function(translation) {
      cb(translation);
    });
  }

  $scope.log = function(param) {
    console.log(param)
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.11.1/angular-translate.min.js"></script>


<div ng-app="myApp">
  <div ng-controller="myController">
    <div>
      <button ng-click="translationServiceCallback('HEADLINE',log)">Translate</button>
      <button ng-click="log('HEADLINE')">WYSIWYG</button>
    </div>
  </div>
</div>

如何在HTML标记属性中使用angular-translate作为函数参数

1 个答案: