Получение контекста!
Добрый день!
У меня есть 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! было Привет!. Может кто подсказать как правильно написать? |
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>
|
Большое Вам спасибо! )
Как мне еще сделать так чтобы не было видно что было до того "Hello!", а сразу загружался переведенный текст. Потому что сейча маленькая задержка есть и всё видно. Не знаете случайно? |
А если так загрузить будет ошибка (
<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>
|
Поставил scope= true и всё ок. Спасибо.
|
А всё таки , как прорисовать один раз после получания запроса? А не перерисовывать заново?
|
Добавил флаг!всё ок
|
Цитата:
<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>
|
| Часовой пояс GMT +3, время: 15:08. |