Discussion :

[Toiine]

Bonjour,

J'aimerai pouvoir binder un ng-show sur un booleen, ou un retour de fonction.

Mais, mon ng-show est situé dans un <script type="text/ng-template" id="firstDialogId">.

Voici le code concerné :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/ng-template" id="firstDialogId">
 
    <div class="ngdialog-message" align="center" id="download">
        <h4 ng-show="isFrench">Télécharger la cartographie</h4>
        <h4 ng-show="getIsEnglish()">Download cartography</h4>
        <a href="index.html" download>
            <img  src="../style/images/pdf-icon.png" alt="Download PDF" width="30%" height="30%">
        </a>   
        <a href="index.html" download>
            <img border="0" src="../style/images/vsd-icon.png" alt="Download VSD" width="30%" height="30%">
        </a>   
        <a href="index.html" download>
            <img border="0" src="../style/images/PNG-icon.png" alt="Download PNG" width="30%" height="30%">
        </a>   
 
         <div class="ngdialog-buttons">
             <button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="closeThisDialog('button')">Close</button>
         </div>
    </div>
</script>

J'essaie avec un booleen et également avec un getter tous deux issus du controller car il semblerait qu'on puisse accéder aux fonctions mais pas aux variables du $scope depuis un ng-template.


Et voici la partie concernée de mon controller :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
app.controller('viewerController', function ($scope, $rootScope, ngDialog) {
    // Slide menu state
    $scope.checked = false; // This will be binded using the ps-open attribute
 
    $scope.toggle = function() {
        $scope.checked = !$scope.checked
    }
    // Language initialization
    $scope.defaultLanguage = navigator.language || navigator.userLanguage;
 
    if (localStorage.getItem("defaultLanguage"))
        $scope.currentLanguage = localStorage.getItem("defaultLanguage");
    else
        $scope.currentLanguage = $scope.defaultLanguage;
 
    if ($scope.currentLanguage == "fr") {
        $scope.isFrench = true;
        $scope.isEnglish = false;
    }
    else if ($scope.currentLanguage == "en") {
        $scope.isFrench = false;
        $scope.isEnglish = true;
    }
 
    $scope.getIsFrench = function () {
        return $scope.isFrench;
    };
 
    $scope.getIsEnglish = function () {
        return $scope.isEnglish;
    };

J'ai également essayé :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
        <h4 ng-show="angular.element(document.getElementById("svgElement")).scope().isFrench">Télécharger la cartographie</h4>
        <h4 ng-show="angular.element(document.getElementById("svgElement")).scope().isEnglish">Download cartography</h4>
        ...

ou encore :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
        <h4 ng-show="angular.element(document.querySelector('#french')).innerHTML">Télécharger la cartographie</h4>
        <h4 ng-show="angular.element(document.querySelector('#english')).innerHTML">Download cartography</h4>
        ...

Mais aussi :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
    <!-- This should be hidden -->
    isFrench : <div id="french">{{ isFrench }}</div>
    isEnglish : <div id="english">{{ isEnglish }}</div>
 
<script type="text/ng-template" id="firstDialogId">
    <div class="ngdialog-message" align="center" id="download">
        <h4 ng-show="document.getElementById('french').innerHTML">Télécharger la cartographie</h4>
        <h4 ng-show="document.getElementById('english').innerHTML">Download cartography</h4>
        ...

Enfin, rien de tout ça n'a fonctionné, une idée du pourquoi et de comment résoudre mon problème ?


Amicalement.

[Toiine]

Euuh, c'est normal de ne pas trouver de bouton Edit sur mon premier post ?

Sinon toujours la même chose, dans le <script></script>, pas d'accès au scope les {{expressions}} ne sont pas interprétées...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<script type="text/ng-template" id="firstDialogId">
    <div class="ngdialog-message" align="center" id="download">
        <h4 ng-show="{{isFrench}}">Télécharger la cartographie</h4>
        <h4 ng-show="{{isEnglish}}">Download cartography</h4>
        <a href="../downloads/PDF/{{currentLanguage}}/{{currentCartography}}.pdf" download>
            <img  src="../style/images/pdf-icon.png" alt="Download PDF" width="30%" height="30%">
        </a>
        <a href="../downloads/VSD/{{currentCartography}}.vsd" download>
            <img border="0" src="../style/images/vsd-icon.png" alt="Download VSD" width="30%" height="30%">
        </a>
        <a href="../downloads/PNG/{{currentLanguage}}/{{currentCartography}}.png" download>
            <img border="0" src="../style/images/PNG-icon.png" alt="Download PNG" width="30%" height="30%">
        </a>
 
         <div class="ngdialog-buttons">
             <button type="button" class="ngdialog-button ngdialog-button-primary" ng-click="closeThisDialog('button')">Close</button>
         </div>
    </div>
</script>

[vermine]

Euuh, c'est normal de ne pas trouver de bouton Edit sur mon premier post ?

Oui, après trois jours les messages ne peuvent plus être édités afin de garder une cohérence dans la discussion. Imagine qu'il y ait déjà eu dix réponses à ton message, en éditant le premier, tout le reste deviendrait peut-être incohérent.

[Toiine]

Oh, je vois.

Sinon, j'ai résolu mon problème, ça venait d'une directive et d'un scope privé lié à ngDialog.

[slim]

Salut !

J'interviens juste pour une petite remarque.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
        <h4 ng-show="document.getElementById('french').innerHTML">Télécharger la cartographie</h4>
        <h4 ng-show="document.getElementById('english').innerHTML">Download cartography</h4>

Ca pique ça !
Je pense qu'il faut proscrire ce genre d'utilisation : document.getElement...
Pour la traduction de ton site, cherche du coté des filtres i18n : Tu déclare un filtre que tu appelle comme ceci dans tes templates :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{{'ma_chaine_a_traduite'|i18n}}

Comme cela, ton code est beaucoup plus lisible et surtout plus propre...

[Toiine]

Bonjour,

Salut !

J'interviens juste pour une petite remarque.



Ca pique ça !
Je pense qu'il faut proscrire ce genre d'utilisation : document.getElement...

Oui, enfin, à savoir que comme dit précédemment, j'arrivais pas à faire fonctionner mon code jusqu'à trouver la source du problème dans la directive. Du coup, j'ai essayé un peu tout et n'importe quoi en attendant...

Pour la traduction de ton site, cherche du coté des filtres i18n : Tu déclare un filtre que tu appelle comme ceci dans tes templates :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{{'ma_chaine_a_traduite'|i18n}}

Comme cela, ton code est beaucoup plus lisible et surtout plus propre...

Merci, je vais jeter un oeil de ce coté.
Cependant, ma chaîne traduite ? Ou à traduire ? La c'est un mélange des deux ^^'.

[slim]

Cependant, ma chaîne traduite ? Ou à traduire ? La c'est un mélange des deux ^^'.

Euh... les chaines de caractères que tu veux traduire...

Il y a plusieurs solutions que tu peux trouver sur le web.
En ce qui me concerne, j'utilise celle-ci :

Le filtre i18n :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
angular.module('myapp').filter('i18n', ['currentLocale', function (locale) {
    return function (key, p) {
        if (typeof locale[key] != 'undefined' && locale[key] != '') {
            return (typeof p === "undefined") ? locale[key] : locale[key].replace('@{}@', p);
        }
    }
}]);

Le "service value" currentLocal que tu peux mettre dans un fichier i18n_fr_FR et en fonction du choix de la langue par l'utilisateur tu appelle le bon fichier :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
angular.module('myapp').value('currentLocale', {
    ma_chaine_a_traduire: 'La chaîne traduite',
ma_chaine_a_traduire_2: 'La chaîne traduite 2',
ma_chaine_a_traduire_3: 'La chaîne traduite 3',
    _getLocalizationKeys: function() {
        var keys = {};
        for (var k in this) {
            keys[k] = k;
        }
        return keys;
    }
});

Le template (html) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<strong>{{'ma_chaine_a_traduire'|i18n}}</strong>