2016-08-04 74 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會忽略這種綁定,假設後者是這樣做的。