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 :)