Angular-翻译只显示资源键

Question

我是 angular 的新手，我遇到了 angular 翻译系统的一个大问题。

我厌倦了搜索，我认为我的所有代码都是正确的，可以翻译我的资源，但是当我构建项目时，它只显示资源密钥。例如，如果我有这个资源文件

{
  "LOGIN_USERNAME": "Nome de utilizador",
  "LOGIN_PASSWORD":"Password"
}

在浏览器上显示 LOGIN_USERNAME。

我没有收到 none JS 错误，但我注意到 jquery.js 的某处已经有这个函数：

function assert( fn ) {
    var div = document.createElement("div");

    try {
        return !!fn( div );
    } catch (e) {
        return false;
    } finally {
        //some code
    }
        //some code
}

我在这里设置了一个断点，它总是落在这个 catch 上。这不是因为这个而进行翻译吗？问题出在哪里，我该如何解决？

app.js

(function ()
{
    angular.module("MainWebsite",
    [
        'ui.router',
        'pascalprecht.translate',
        'angularModalService',

        //some other modules of my

        "LoginModule"
    ])

    .config(['$stateProvider', '$compileProvider', '$urlRouterProvider', '$sceDelegateProvider', '$httpProvider', "$translateProvider",
    function ($stateProvider, $compileProvider, $urlRouterProvider, $sceDelegateProvider, $httpProvider, $translateProvider)
    {
        $compileProvider.debugInfoEnabled(false);

        $translateProvider.useStaticFilesLoader(
        {
            prefix: 'resources/locale-',
            suffix: '.json'
        });
        $translateProvider.useSanitizeValueStrategy('escape');
        $translateProvider.preferredLanguage('pt-PT');
        $translateProvider.forceAsyncReload(true);

        $urlRouterProvider.otherwise('/login');

        $stateProvider
        .state('login',
        {
            url: '/login',
            template: '<login></login>',
        })
    }])

    .run(["$rootScope", "$state", "$document", "LayoutService",
     function ($rootScope, $state, $document, LayoutService)
     {
            $rootScope.LayoutState = LayoutService.LayoutState;
     }])
})();

login.html

<label>{{::'LOGIN_USERNAME'|translate}}</label>
<label>{{'LOGIN_PASSWORD'|translate}}</label>

login.js（模块）

(function()
{
      angular.module("LoginModule", [])

      .directive("login", [function () 
      {
            return {
                  restrict: "EA",
                  replace: false,
                  templateUrl: "modules/login/login.html",
                  controller: "LoginController",
                  controllerAs: "LoginVM"
            }
      }])
})();

loginCtrl.js（控制器）

(function()
{
      angular.module("LoginModule")

      .controller("LoginController", ["$state", function ($state) 
      {
      }])
})();

index.html

<!doctype html>
<html class="no-js" lang="pt-pt" ng-app="MainWebsite">
<head>
    <meta charset="utf-8">
    <meta h"x-ua-compatible" content="ie=edge">
    <meta name="viewport" cttp-equiv=ontent="width=device-width, initial-scale=1.0">
    <title>Candidaturas Online</title>

    <link rel="stylesheet" href="css/app.min.css">
</head>
<body>
    <script src="js/app.min.js"></script>

    <div ui-view class="appContainer"></div>
</body>
</html>

package.json

{
  "name": "myproject",
  "version": "1.0.0",
  "description": "any description",
  "main": "gulpfile.js",
  "author": "someone",
  "private": true,
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-load-plugins": "^1.1.0",
    "gulp-sass": "^2.3.1",
    "gulp-connect": "^4.0.0",
    "gulp-ignore": "^2.0.1",
    "gulp-rimraf": "^0.2.0",
    "gulp-concat": "^2.6.0",
    "gulp-order": "^1.1.1",
    "gulp-uglify": "^1.5.3",
    "gulp-sourcemap": "^1.0.1",
    "gulp-imagemin": "^3.0.0",
    "gulp-cssmin": "^0.1.7",
    "gulp-ng-annotate": "^2.0.0",
    "gulp-mobilizer": "^0.0.3",
    "gulp-replace": "^0.5.4",
    "gulp-angular-filesort": "^1.1.1",
    "gulp-rename": "^1.2.2",
    "gulp-angular-templatecache": "^1.8.0",
    "gulp-sourcemaps": "^2.0.0-alpha",
    "gulp-gzip": "^1.3.0",
    "run-sequence": "^1.1.5",
    "imagemin-pngcrush": "^4.1.0",
    "streamqueue": "^1.1.1",
    "weinre": "^2.0.0-pre-I0Z7U9OV"
  },

  "dependencies": {
    "angular": "^1.5.7",
    "angular-animate": "^1.5.7",
    "angular-touch": "^1.5.7",
    "angular-sanitize": "^1.5.7",
    "angular-ui-router": "^0.2.18",
    "angular-translate": "^2.11.1",
    "angular-translate-loader-static-files": "^2.11.1",
    "angular-modal-service": "^0.6.10",
    "angular-ui-bootstrap": "^1.3.2",
    "bootstrap-sass": "^3.3.6",
    "motion-ui": "^1.2.2",
    "hamburgers": "^0.5.0",
    "jquery": "^2.2.3"
  },
  "scripts": 
  {
    "start": "gulp",
    "build": "gulp sass"
  }
}

Answer 1

已解决！

为了测试是否是插件问题，我在我的 loginCtrl.js 上使用了这段代码，我收到了正确翻译的警报：

$translate('LOGIN_USERNAME').then(function (translated)
{
    alert(translated);
});

所以，我准确地复制并粘贴了 guidelines 上的内容以用于 html，并更改了资源密钥。所以，而不是

{{::'LOGIN_USERNAME'|translate}}

我用过

{{'LOGIN_USERNAME' | translate}}

现在可以了！显然 :: 在这里不起作用，但据我的同事说，这仅用于第一次分配值，因此下一次 AngularJS 忽略此绑定，假设后者已完成。

Angular-翻译只显示资源键

Angular-Translate only displays resource key

javascript

jquery

angularjs

gulp

angular-translate