Форум

igor-js · #1 (**permalink**) 02.02.2017, 16:25

Добрый день!
У меня есть JSON файл
{
"Hello!" : "Привет!",
"Bye" : "Пока"
}

Есть код :

<html ng-app="app">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script>
     
        var app = angular.module('app', []);

        app
                .controller('translateController', ['$scope', function ($scope, $http) {
                    $scope.msg = 'YES';
                    $scope.dictionary = {};
                    $http.get('translations.json').then(function (success) {

                        $scope.dictionary = success.data;
                    })
                }])
                .directive("translate", function () {
                    return {
                        restrict: "A",
                        template: function (el, attr) {
                            debugger;
                            var word = el.contents()[0];
                            
                            return dictionary[word];
//                            return word;

                        }
                    };
                });

    </script>
</head>
<body ng-controller="translateController">
<h1 translate >Hello!</h1>
</body>
</html>

Как мне привильно вернуть return dictionary[word] , чтобы вместо Hello! было Привет!.

Может кто подсказать как правильно написать?

destus · #2 (**permalink**) 02.02.2017, 19:33

igor-js,

<html ng-app="app">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
</head>
<body ng-controller="translateController">
<h1 translate>Hello!</h1>
<script>
     
        var app = angular.module('app', []);

        app
                .controller('translateController', ['$scope', '$http', function ($scope, $http) {
                    $scope.msg = 'YES';
                    $scope.dictionary = {};
                    /*$http.get('translations.json').then(function (success) {
                        $scope.dictionary = success.data;
                    })*/
                    $scope.dictionary = {"Hello!" : "Привет!","Bye" : "Пока"}
                }])
                .directive("translate", function () {
                    return {
						compile: function(elem){
							var text = elem.text();
							elem.html('{{dictionary[text]}}')
							return function(scope){
								scope.text = text;
							}
						}
					}
                })
    </script>
</body>
</html>

igor-js · #3 (**permalink**) 02.02.2017, 20:57

Большое Вам спасибо! )
Как мне еще сделать так чтобы не было видно что было до того "Hello!", а сразу загружался переведенный текст. Потому что сейча маленькая задержка есть и всё видно.
Не знаете случайно?

igor-js · #4 (**permalink**) 02.02.2017, 21:05

А если так загрузить будет ошибка (

<html ng-app="app" >
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
</head>
<body ng-controller="translateController">
<h1 translate>Hello!</h1>
<h1 translate>Bye</h1>
<script>

    var app = angular.module('app', []);

            app
            .controller('translateController', ['$scope', '$http', function ($scope, $http) {

               
              $scope.dictionary = {"Hello!" : "Привет!","Bye" : "Пока"}

            }])
            .directive("translate", function () {
                return {
                    compile: function (elem) {
                        var text = elem.text();
                        elem.html('{{dictionary[text]}}');

                        return function (scope) {
                            scope.text = text;
                        }
                    }
                }
            })
</script>
</body>
</html>

igor-js · #5 (**permalink**) 02.02.2017, 21:13

Поставил scope= true и всё ок. Спасибо.

igor-js · #6 (**permalink**) 02.02.2017, 22:26

А всё таки , как прорисовать один раз после получания запроса? А не перерисовывать заново?

igor-js · #7 (**permalink**) 02.02.2017, 23:51

Добавил флаг!всё ок

destus · #8 (**permalink**) 03.02.2017, 06:35

Сообщение от igor-js

А всё таки , как прорисовать один раз после получания запроса? А не перерисовывать заново?

<html ng-app="app">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
</head>
<body ng-controller="translateController">
<h1 ng-cloak>{{dictionary['Hello!']}}</h1>
<h1 ng-cloak>{{dictionary['Bye']}}</h1>
<script>
     
        var app = angular.module('app', []);

        app
                .controller('translateController', ['$scope', '$http', function ($scope, $http) {
                    $scope.msg = 'YES';
                    $scope.dictionary = {};
                    /*$http.get('translations.json').then(function (success) {
                        $scope.dictionary = success.data;
                    })*/
                    $scope.dictionary = {"Hello!" : "Привет!","Bye" : "Пока"}
                }])
    </script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript