Ajout de code HTML grâce aux directives

**Hippocrène** · 07/05/2016, 16h32

Bonjour à tous,

J’utilise la version 1.5.2 d’AngularJS.

J’aimerais savoir comment ajouter du code HTML, tel qu’une balise « input » via AngularJS.
J’ai appris que les « directives » d’AngularJS répondent à ce genre de problèmes.

Malheureusement, je n’ai pas réussi à afficher le premier bouton.

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
21
22
23
24
<!DOCTYPE html>
 
<html ng-app="app">
<head>
  <meta charset="utf-8">
  <title>ANGULARJS TESTS</title>
 
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
  <!--Module-->
  <script src="app.module.js"></script>
  <!--Directive-->
  <script src="addHtml.directive.js"></script>
</head>
 
<body>
  <div> 
<!--Test directive add HTML-->
<!-- L’erreur est ici, il faut écrire add:html ou add-html -->
    <addHtml></addHtml>
  </div>  
</body>
 
</body>
</html>

Code JavaScript :

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

1
2
3
4
5
6
7
(function(){
	'use strict';
 
	angular
		.module('app', []);
 
})();

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
(function () {
    'use strict';
 
    angular
        .module('app')
        .directive('addHtml', addHtml);
 
        function addHtml() {
            var directive =  {
                restrict: 'E',
                template: '<button>Add an input</button>'
            };
            return directive;
        }
})();

EDIT : J’ai trouvé la solution.
Dans le fichier .html, les balises ne doivent pas comporter de majuscule.
Il faut alors écrire « add:html » ou « add-html ».

Cependant, je ne parviens pas à comprendre quels outils, proposés par AngularJS, utiliser pour créer dynamiquement des « inputs » en cliquant sur le bouton créé. Les nouveaux « inputs » devront avoir des identifiants distincts les uns des autres.

Avez vous des conseil pour réaliser cette opération ?

Merci d’avance :)

**Inikaam** · 11/05/2016, 10h49

Bonjour Hippocrène,

Si tu souhaites ajouter un fonctionnement à ta directive, il faut que tu lui associe un controller, c'est ensuite dans ce controller que tu génèrera le fonctionnement voulu.
Je te suggère par ailleurs d'avoir un template html, parce que ça va prendre plus de place que ton simple bouton ^^

Pour rappel, dans ton objet que tu retourne, définis "controller" et "controllerAs". Tu as le détail dans la doc angular et les bonnes pratiques linkées dans ta signature ^^ (ça fait plaisir de voir quelqu'un qui les suit

)

Ajout de code HTML grâce aux directives

AngularJS

Discussions similaires

Partager

Partager