Question

我目前正在开发基于AngularJS的应用程序。我正在使用'pascalprecht.translate'库来创建多语言应用程序。有关详细信息，请参阅此link。在创建我的应用程序时，我创建了页面标题的动态切换。此开关从$routeProvider读取路径名称，并为<header>添加相应的标题。请参阅以下示例：

// Pages configuration
myApp.run(['$rootScope', '$route', function($rootScope, $route) {
    $rootScope.$on('$routeChangeSuccess', function() {

    document.title = $route.current.title;
    var title = document.getElementsByTagName("title")[0].innerHTML;

    var leftSvg = document.getElementById('leftsvg');
    var rightSvg = document.getElementById('rightsvg');


    // start responsive elements
        $("footer").removeClass("hidden-xl-down");
        $("#header").removeClass("hidden-xl-down");
        $("#leftheaderblock").removeAttr('class');
        $("#rightheaderblock").removeAttr('class');
        $(".activefooter").removeAttr('class');
        $("#homepageback").removeClass("hidden-xl-down");
        $("#rightsvg").addClass("hidden-xl-down");
        $("#leftsvg").addClass("hidden-xl-down");

        $("body").removeAttr('class');
        $("body").addClass(title);

    if (title === 'login') {
        $("footer").addClass("hidden-xl-down");
        $("#header").addClass("hidden-xl-down")
    }

    else if (title === 'productpage') {
        $("#homepageback").addClass("hidden-xl-down");
        $("#homesvg").addClass("activefooter");
        $("#leftheaderblock").addClass("col-55");
        $("#rightheaderblock").addClass("col-45");
        $('#leftheadertext').text('Alle producten');
        $('#rightheadertext').text('Bestelling');
        $("#rightsvg").removeClass("hidden-xl-down");
        $("#leftsvg").removeClass("hidden-xl-down")

    }
});

}]）;

html <html>是index.html文件中的一些简单div。您将在下面看到rightheaderblock。

的示例

<div id="rightheaderblock">
    <div class="bc-f3f3f3 justify-content-center toptext d-flex align-items-center headerblock">
        <span id="rightheadertext"></span>
    </div>
</div>

问题

使用'pascalprecht.translate'可以使用JSON格式的语言库创建多语言应用程序。请参阅以下示例：

＆＃13;

var myApp = angular.module('myApp',['ngRoute','pascalprecht.translate','ngSanitize']);
var mypagetitle = document.getElementsByTagName("title")[0];
myApp.config(function ($routeProvider, $locationProvider, $translateProvider) {
    $locationProvider.hashPrefix('');
    $routeProvider

        .when('/', {
            templateUrl: 'views/login_view.html',
            title: 'login'
        })

        .when('/productpage', {
            templateUrl: 'views/productpage_view.html',
            title: 'productpage'
        })

        .when('/payorder', {
            templateUrl: 'views/payorder_view.html',
            title: 'payorder'
        });
    $translateProvider
        .translations('en', {
            'Opslaan': 'Save',
            'Alle producten': 'All products',
            'Bestelling': 'Order',
        })
        .translations('nl', {
            'Opslaan': 'Opslaan',
            'Alle producten': 'Alle producten',
            'Bestelling': 'Bestelling',
        });
    $translateProvider.useSanitizeValueStrategy('sanitize');
    $translateProvider.preferredLanguage('nl'); // standaard taal bij openen
    // configures staticFilesLoader
    // configures staticFilesLoader
});

myApp.controller('mainCtrl', function($http, $scope) {
    $scope.text = "hi";
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div class="main" ng-controller="mainCtrl">
  <div id="rightheaderblock">
        <div class="bc-f3f3f3 justify-content-center toptext d-flex align-items-center headerblock">
          <span id="rightheadertext">
            {{text}}
          </span>
        </div>
  </div>
  <div class="bodyTests">
    <p> {{ "Bestelling" | translate }} 
  </div>

＆＃13;

在您之上，您可以查看'tranlate'函数如何工作的简单示例。通过将| translate添加到字符串并将该字符串定义到.translations()部分，我可以创建翻译。

回顾上面的// Pages configuration，您可以看到我使用if/else语句来检查网页标题并添加.text()和{{ 1}}到当前页面标题的div。

我遇到的问题是通过例如classes部分。从| translate语句到视图的{{"bestelling" | translate}}。所以通过以下一行：

if/else

该页面不是问题。但是添加

$('#rightheadertext').text('Bestelling');

在视图中给出了完整的字符串：

$('#rightheadertext').text('{{ Bestelling | translate }}');

我尝试了多种不同的功能，例如{{ Bestelling | translate }}和.val()。但似乎都不起作用。我想要的结果是在视图中添加以下结构：

append()

如果您对我的问题有任何问题或意见，请在下面的评论中告知他们。

一如既往，提前谢谢！

Answer 1

这个怎么样......

<p> {{ $root.text1 | translate }}</p>

然后在你的代码中，在if / else ...

中

if (...) {
    $rootScope.text1 = 'Bestelling';
} else {
    $rootScope.text1 = 'Opslaan';
}

在div的内容中添加/添加，文本和功能

1 个答案: