Angular-Translate zeigt nur Ressourcenschlüssel

Ich bin neu mit eckigen und ich habe ein großes Problem mit dem eckigen Übersetzungssystem.Angular-Translate zeigt nur Ressourcenschlüssel

Ich bin es leid zu suchen und ich denke, ich habe alle Code korrekt, um die Übersetzung meiner Ressourcen zu tun, aber wenn ich das Projekt erstellen zeigt es nur den Ressourcenschlüssel. Zum Beispiel, wenn ich diese Ressourcendatei

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

auf dem Browser wird es LOGIN_USERNAME angezeigt.

Ich erhalte keine JS Fehler nicht, aber ich schon bemerkt, irgendwo auf dem jquery.js gibt es diese Funktion:

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

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

ich geputtet hier einen Haltepunkt und die es fällt immer auf dieser catch. Dies macht die Übersetzung deswegen nicht? Wo ist das Problem und wie kann ich das lösen?

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 (Modul)

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

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

loginCtrl.js (Controller)

(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" 
    } 
}

Quelle

2016-08-04 Ninita

gelöst!

Um zu testen, ob ein Plugin Problem, das ich diesen Code auf meinem loginCtrl.js verwendet wurde, und ich bekam eine Benachrichtigung mit der richtigen Übersetzung:

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

Also, ich kopiert und eingefügt genau das, was auf die guidelines für die es html und änderte den Ressourcenschlüssel. Anstatt also

{{::'LOGIN_USERNAME'|translate}}

I verwendet

{{'LOGIN_USERNAME' | translate}}

und jetzt funktioniert es! Offenbar funktioniert :: hier nicht, aber nach meinen Kollegen dient dies dazu, den Wert erst beim ersten Mal zuzuweisen und so ignoriert AngularJS beim nächsten Mal diese Bindung, unter der Annahme, dass letzterer gemacht wird.

Quelle

2016-08-04 14:42:57 Ninita

Angular-Translate zeigt nur Ressourcenschlüssel

Antwort

Verwandte Themen