0
我一直在學習AngularJS的項目。我試圖用值填充表格，然後放兩個按鈕來轉換或更改此數據。我有數據表，但是當我試圖將按鈕用於測試翻譯時，它們沒有任何值。控制檯不會返回錯誤。這是我第一次使用AngularJS，所以也許我的代碼有很多錯誤。AngularJS翻譯表
<!DOCTYPE html>
<html lang="es" ng-app="modulo">
<head>
<style>
body {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
* {
font-family: 'Roboto', sans-serif;
}
section {
padding: 1%;
margin-left: auto;
margin-right: auto;
position: relative;
}
footer {
position: fixed;
left: 0px;
bottom: 0px;
width: 100%;
}
.mdl-layout__drawer-button {
color: rgb(0, 0, 0) !important;
}
.mdl-data-table td,
.mdl-data-table th {
text-align: center !important;
}
</style>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<title>Shortcuts IntelliJ</title>
</head>
<body ng-controller="controlador">
<header>
<article class="demo-layout-transparent mdl-layout mdl-js-layout">
<article class="mdl-layout__drawer">
<span class="mdl-layout-title">Grupos</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</article>
</article>
<article class="mdl-layout__header-row">
<article class="mdl-layout-spacer"></article>
<nav class="mdl-navigation">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
<input type="checkbox" id="switch-1" class="mdl-switch__input" checked>
<span class="mdl-switch__label"><b>English/Spanish</b></span>
</label>
</nav>
</article>
</header>
<section>
<form action="#">
<article class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class="mdl-button mdl-js-button mdl-button--icon" for="sample6">
<i class="material-icons">search </i>
</label>
<article class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="sample6" ng-model="buscar">
<label class="mdl-textfield__label" for="sample-expandable">Search</label>
</article>
</article>
</form>
<div>
<p translate="VARIABLE_REPLACEMENT"></p>
<button ng-click="changeLanguage('es')" translate="BUTTON_LANG_ES"></button>
<button ng-click="changeLanguage('en')" translate="BUTTON_LANG_EN"></button>
</div>
<table class="mdl-data-table mdl-js-data-table mdl-data-table">
<thead>
<tr>
<th></th>
<th>Intellij</th>
<th>Eclipse</th>
<th>Descripción</th>
</tr>
</thead>
<tbody>
<tr>
<td><b>MULTILINEA</b></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr ng-repeat="multilinea in multilinea | filter: buscar">
<td></td>
<td>{{multilinea.intellij}}</td>
<td>{{multilinea.eclipse}}</td>
<td>{{multilinea.descripcion}}</td>
</tr>
<tr>
<td><b>FORMATO</b></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr ng-repeat="formato in formato | filter: buscar">
<td></td>
<td>{{formato.intellij}}</td>
<td>{{formato.eclipse}}</td>
<td>{{formato.descripcion}}</td>
</tr>
</tbody>
</table>
</section>
<footer class="mdl-mini-footer">
<ul class="mdl-mini-footer__link-list">
<li> <a href="https://github.com/ElHombreSinNombre">Asier Lara</a></li>
<li><a href="https://github.com">Github</a></li>
</ul>
</footer>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.8.1/angular-translate.js"></script>
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<script type="text/javascript">
var contexto = angular.module('modulo', ['pascalprecht.translate']);
var tabla = contexto.controller("controlador", ['$translate', '$scope', function ($translate, $scope) {
var multilinea = [
{
intellij: "sout + (Tab)"
, eclipse: "syso + (Ctrl + Espacio)"
, descripcion: "System.out.println();"
}, {
intellij: "psvm + (Tab)"
, eclipse: "main + (Ctrl + Espacio)"
, descripcion: "public static void main (String[] args){ }"
}
];
$scope.multilinea = multilinea;
var formato = [
{
intellij: "(Ctrl + Alt + T)"
, eclipse: "Coffee-Bytes"
, descripcion: "Region"
}, {
intellij: "Ctrl + Shift + Alt + L"
, eclipse: "Ctrl + Shift + F"
, descripcion: "Auto formatear documento"
}
];
$scope.formato = formato;
var translationsES = {
VARIABLE_REPLACEMENT: 'Hola'
, BUTTON_LANG_ES: 'Castellano'
, BUTTON_LANG_EN: 'Inglés'
};
var translationsEN = {
VARIABLE_REPLACEMENT: 'Hi'
, BUTTON_LANG_ES: 'Spanish'
, BUTTON_LANG_EN: 'English'
};
contexto.config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('es', translationsES);
$translateProvider.translations('en', translationsEN);
$translateProvider.useSanitizeValueStrategy('escapeParameters');
$translateProvider.preferredLanguage('es');
$translateProvider.fallbackLanguage('es');
}]);
$scope.changeLanguage = function (langKey) {
$translate.use(langKey);
};
}]);
</script>
</body>
</html>
與段落也沒有工作的按鈕嗯，你不僅有問題...但我不看問題有.. 。也許嘗試將ng-controller設置爲不在你的身上。而且你可以嘗試使用'{{「BUTTON_LANG_X | translate}}'而不是'translate =」BUTTON_LANG_X「' – kabaehr
是一個測試，只是起作用的過濾器，無論如何我試圖使用{{」BUTTON_LANG_X |翻譯}}並且不工作。我認爲錯誤是$ scope.changeLanguage，但不知道這會發生什麼。 –
您是否試圖推薦'changeLanguage'方法？ – kabaehr