Angular-translate 未知的提供者

Question

我在我的应用程序中使用角度翻译，这是我的 app.js

var formApp = angular.module('formApp', [
  'ngRoute',
  'ui.bootstrap',
  'pascalprecht.translate'
]).config(function($translateProvider) {
    $translateProvider.translations('en', {
       HEADLINE: 'Hello there, This is my awesome app!',
       INTRO_TEXT: 'And it has i18n support!'
    });
});

我在互联网上喜欢的休闲教程。

这就是我在 html 文件中加载库的方式

<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-translate/angular-translate.js"></script>

这就是我打印值的方式

<h2>{{ 'HEADLINE' | translate }}</h2>
<p>{{ 'INTRO_TEXT' | translate }}</p>

但是当我打开我的应用程序时，我会在控制台中收到此消息：

Error: [$injector:unpr] Unknown provider: translateFilterProvider <- translateFilter

有谁知道如何解决这个问题？ 我绝对是 Angular 的初学者，如果错误很愚蠢，我很抱歉:)

Answer 1

在您的控制器中，您需要添加 $translate 作为依赖项。

formApp.controller('myCtrl', function ($scope, $translate) {
 //code
});

因此，例如在 html 中，您必须在这些元素之前的某个点有一个 ng-controller，即需要将依赖项作为参数注入的控制器。

<div ng-controller="myCtrl">
  ...
  <h2 translate>HEADLINE</h2>
  <p translate>INTRO_TEXT</p>
  ...
</div>

同样在配置块中，您需要设置首选语言：

$translateProvider.preferredLanguage('en');