Accéder au scope depuis un script

Version imprimable

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:

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:

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:

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:

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:

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.

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:

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>

09/04/2015, 08h12
vermine

Citation:

Envoyé par Toiine

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. ;)
09/04/2015, 10h04
Toiine

Oh, je vois.

Sinon, j'ai résolu mon problème, ça venait d'une directive et d'un scope privé lié à ngDialog.
09/04/2015, 19h11
slim
Salut !

J'interviens juste pour une petite remarque.
Citation:
Envoyé par Toiine

Code:

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:

{{'ma_chaine_a_traduite'|i18n}}

Comme cela, ton code est beaucoup plus lisible et surtout plus propre... :wink:
10/04/2015, 10h44
Toiine

Bonjour,

Citation:

Envoyé par slim

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

Citation:

Envoyé par slim

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:

{{'ma_chaine_a_traduite'|i18n}}

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

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

Citation:

Envoyé par Toiine

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:

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:

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:

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