2016-08-04 109 views
0

我是新角度,我正面临角度翻译系统的一个大问题。角度翻译只显示资源键

我已经厌倦了搜索,我想我的所有代码都正确地做了我的资源翻译,但是当我构建项目时,它只显示资源键。 例如,如果我对这个浏览器的资源文件

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

它显示LOGIN_USERNAME

我没有收到没有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" 
    } 
} 

回答

0

解决了!

为了测试是否是我用我的loginCtrl.js这段代码插件的问题,我用正确的翻译警告:

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

所以,我复制并粘贴正是上有guidelines为HTML并更改了资源密钥。所以,与其

{{::'LOGIN_USERNAME'|translate}} 

我用

{{'LOGIN_USERNAME' | translate}} 

和现在的作品!显然::在这里不起作用,但根据我的同事的说法,这只是第一次分配值,所以下一次AngularJS会忽略这种绑定,假设后者是这样做的。