Question

嗨，我是angularjs世界的新手。我在做注册页面，我的应用程序包含英文和阿拉伯文页面。我在JSON文件中存储英语和阿拉伯语单词。这是我的index.html文件。

<body ng-app="RoslpApp">
    <div ng-controller="RoslpAppController">
        <div class="popup">
            <label>Language</label>
            <select ng-model="selectedItem">
                <option>العربية</option>
                <option>English</option>
            </select>
            <button ng-click="clickHandler(selectedItem)">Submit</button>
            <ul id="nav">
            <li><a ui-sref="Registration">Registration</a></li>
            </ul>
            <div class="container">
            <div ui-view></div>
        </div>
        </div>
    </div>
</body>

这是我的main.js文件。

var app = angular.module('RoslpApp', ['pascalprecht.translate', 'ui.router']);
app.config(function ($stateProvider, $urlRouterProvider, $urlRouterProvider, $translateProvider, $translatePartialLoaderProvider) {
    $stateProvider
           .state('Registration', {
               url: '/Registration',
               templateUrl: 'Registration/Registration.html'
           });
    $translatePartialLoaderProvider.addPart('Registration');
    $translateProvider.useLoader('$translatePartialLoader', {
        urlTemplate: "/scripts/Locales/{part}/{lang}.json"
    });
    $translateProvider.preferredLanguage('de_EN');
});
app.run(function ($rootScope, $translate) {
    $rootScope.$on('$translatePartialLoaderStructureChanged', function () {
        $translate.refresh();
    });
});
app.controller('RoslpAppController', ['$scope', '$translate', function ($scope, $translate) {
    $scope.clickHandler = function (key) {
        $translate.use(key);
    };
}]);

这是我的注册控制器。

(function () {
    angular.module('RoslpApp').controller('RegistrationController', ['$rootScope', '$translatePartialLoader', '$translate', function ($rootScope, $translatePartialLoader, $translate) {
        $translatePartialLoader.addPart('Registration');
        var isPartAvailable = $translatePartialLoader.isPartAvailable('Registration');
        if (isPartAvailable) {
            $translate('Fname').then(function (data) {
                $rootScope.PageSubTitle = data;
                console.log($rootScope.PageSubTitle);
            });
        }
    }]);
})();

这是我的Registration.html。我只发布一个字段以节省空间。

<label>First Name</label>
                    <input type="text" id="FirstName" class="FirstName" translate="yes" >

这是我的de_EN.json文件。

{
    "Fname":"Fnamein English"
}

我也有阿拉伯文件。我无法在上面的代码中翻译Fname。我可以在这里得到一些帮助来解决这个问题。任何帮助，将不胜感激。谢谢。

Answer 1

 after debuging the plnkr i fount the solution 

app.config(function ($stateProvider, $urlRouterProvider, $urlRouterProvider, $translateProvider, $translatePartialLoaderProvider) {
    $stateProvider
           .state('Registration', {
               url: '/Registration',
               templateUrl: 'Registration.html',
               controller: 'RegistrationController'
           });
    $translatePartialLoaderProvider.addPart('Registration');
    $translateProvider.useLoader('$translatePartialLoader', {
        urlTemplate: "{lang}.json"
    }); 
    $translateProvider.preferredLanguage('de_AR');


});
// app.run(function ($rootScope, $translate) {
//     $rootScope.$on('$translatePartialLoaderStructureChanged', function () {
//         $translate.refresh();
//     });
// });

------------------
    i also edited index.html head part


      <title>Raya Financing</title>
        <link href="style.css" rel="stylesheet" />
        <link href="menu.css" rel="stylesheet" />
        <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
       crossorigin="anonymous"></script>
      <script data-require="angular.js@1.3.8" data-semver="1.3.8" src="https://code.angularjs.org/1.3.8/angular.js"></script>
        <script data-require="angular-translate@*" data-semver="2.5.0" src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.5.0/angular-translate.js"></script>
           <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>

        <script src="angular-translate-loader-partial.min.js"></script>
        <script src="Main.js"></script>
         <script src="custom.js"></script>
        <script src="menu.js"></script>
        <script src="RegistrationController.js"></script>



        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">

如何在angularjs中使用translate？

1 个答案: