Discussion :

[Firlfire]

Bonjour,
Débutant en AngularJS je me pose une question.
J'ai un formulaire géré par delCtrl.js) qui a 2 sections différentes, une des deux est affichée suivant l'input radio sélectionné:
- radio 1 coché : section1 affichée section2 caché
- radio 2 coché : setion1 cachée section2 affichée.

Chaque input est relié à une variable via ng-model (ex: prend la valeur true/false pour une checkbox)

Je veux faire en sorte que lorsque le 1er bouton radio est coché, toutes les valeurs des ng-model (et inputs) de la section2 passent a false et en plus les masqué avec un ng-if, mais je me demande quelle est la meilleure pratique:

Créer une fonction dans mon controller (appelé par un ng-click sur les radio) qui changera les bonne valeur :

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
 
            <label>
              <input type="radio" ng-value="true" name="keep" ng-model="keep" ng-click="$ctrl.showSection(true)">oui
            </label>
            <label>
              <input type="radio" ng-value="false" name="keep" ng-model="keep" ng-click="$ctrl.showSection(false)">non
            </label>
 
<!-- section 1 -->
             <label>
                <input type="checkbox" ng-if="keep" ng-disabled="!keep" ng-model="redirect">Rediriger
              </label>
<!-- section 2 -->
             <label>
                <input type="checkbox" ng-if="!keep" ng-disabled="keep" ng-model="archive">archiver
              </label>

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
 
delCtrl.js:
angular.module('myApp')
        .controller('delCtrl', function ($uibModalInstance, $scope, user) {
          var $ctrl = this;
          $ctrl.showSection = function (section1) {
            if(section1){
              // inputs.value section 2 = false
              $scope.archive = false;
              // ...
            }
            else{
              // inputs.value section 1 = false
              $scope.redirect= false;
              // ...
            }
          };
})

Ou bien est-ce que la bonne pratique serait de faire un directive?

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
 
            <label>
              <input type="radio" ng-value="true" name="keep" ng-model="keep" show-section>oui
            </label>
            <label>
              <input type="radio" ng-value="false" name="keep" ng-model="keep" show-section>non
            </label>
 
             <label>
                <input type="checkbox" ng-disabled="keep" ng-model="archive">archiver
              </label>

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
 
//showsection.js:
angular.module('myApp')
        .directive('showSection', function () {
          return {
            restrict: 'A',
            scope: false,
            // option...
            link: function (scope, elem, attrs, ngModel) {
              console.log(scope);
              console.log(elem);
              console.log(attrs);
              console.log(ngModel);
            }
          };
 
        });

Je peux me débrouiller pour faire le code, j'ai fait celui là pour illustrer ce que je veux dire, je voudrais juste savoir laquelle de ces deux méthodes est la "bonne pratique" dans ce cas.

En plus de ça, j'ai quelques questions concernant les directives:
- Pouvez vous me confirmer la présence de scope: false dans sa déclaration pour avoir accès aux $scope.variables de mon controller
- est-ce que je doit déclarer le controller dans la directive avec controller: delCtrl
- une directive est semblable à un evenement sur un input?? J'ai vu des code avec des $element.$on('click'){ ... }

Merci pour vos réponse!

[pterrat]

Salut,

Je te conseille de gérer sans directive pour un exemple aussi simple.
Une directive sert souvent à gérer une logique métier plus compliqué que cela.
Ne t’embêtes pas avec ça, surtout que tu ne vas pas le réutiliser plus loin (enfin je ne pense pas)

- une directive est semblable à un événement sur un input?? J'ai vu des code avec des $element.$on('click'){ ... }

Non, les événements sont gérés via ng-click, ng-change, etc...

En espérant t'avoir aidé

[Firlfire]

Merci pour ta réponse,
Donc une directive est à créer seulement si on peut l'utiliser dans plusieurs vues ou si c'est plus compliqué que ça.
Est-ce que tu pourrais m'expliquer un contexte (sans code, juste le contexte) dans le quel se serait pertinent de créer une directive svp??
Je passe le sujet en résolu

Encore merci!

[pterrat]

Les directives sont intéressantes pour réutiliser à plusieurs endroits dans ton application.
Par exemple, tu veux créer un button bien spécifique avec un template bien spécifique, que tu comptes réutiliser plus loin. Tu peux créer une directive button-custom par exemple que tu pourras réutiliser partout après. De plus ils auront chacun leurs controllers.

Tu peux aller voir ce lien pour plus de détail : http://www.lesbasesdangularjs.fr/directive

Si tu as d'autres questions hésites pas

[Marco46]

Attention à ne pas confondre directive et component. Les directives devraient être utilisées uniquement en tant qu'attribut pour ajouter un comportement à un élément de DOM (natif ou component maison) existant.

Utiliser des directives en tant qu'élément c'est so deprecated.