Ajout de code HTML grâce aux directives
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:
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:
1
2
3
4
5
6
7
| (function(){
'use strict';
angular
.module('app', []);
})(); |
Code:
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 :)
