Получение контекста! [Архив форума]

igor-js

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

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

02.02.2017, 20:57

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

igor-js

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

02.02.2017, 21:13

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

igor-js

02.02.2017, 22:26

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

igor-js

02.02.2017, 23:51

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

destus

03.02.2017, 06:35

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

<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>