app.directive('notes', function(){
// template : '<h1>Test</h1>'
// templateUrl : ''
// restrict : 'A' (=attribut) | 'E' (=element) | 'C' (=CSS Class) || Permet l'utilisation de la directive par le moyen indiqué
// restrict : 'AEC'
// scope : {
// {nomAttributHtml} : '=' // récupère la valeur $scope contenue dans l'attr {nomAttributHtml}
// {nomAttributHtml} : '={nomAttributHtml2}'
// {nomAttributHtml} : '@' // recupère le CONTENU brut sous forme string
// {nomAttributHtml} : '&' // utilise une fonction contenue dans le $scope parent et binder lors du click ?
// } --> notion d'isolation. On créé un scope spécifique à chaque fois que la directive est appelée
// ** Link permet de créer une fonction capable d'interagir avec le DOM afin de mettre à jour certains éléments dans le code HTML (créer un timer par exemple)
// link : function(scope, element, attrs){
// }
});
app.directive('ngTime', function(dateFilter, $interval, [DEPENDENCIES]){ // CAMEL CASE !!!
return {
restrict : 'E',
template : '{{ time }}',
scope : {},
link : function(scope, element, attrs){
scope.time = dateFilter(new Date(), 'hh:mm:ss');
element.on('$destroy', function(){
$interval.cancel(interval); // Quand l'élément HTML disparait de la vue, on détruit l'interval
});
interval = $interval(function(){
scope.time = fateFilter(new Date(), 'hh:mm:ss'); // pour refresh le temps
}, 1000);
}
}
});
app.directive('transclude', function(){ // CAMEL CASE !!!
return {
restrict : 'E',
template : '{{ time }} <div ng-transclude>{__Récupère_le_code_déjà_présent_à_l'intérieur_de_la_balise_et_l'injecte_ici__}</div>',
transclude : true // important
}
});
/*********** Controller *************/
app.directive('ngTabs', function(){
return {
restrict : 'E',
transclude : true,
scope : {},
controller : function(){
// créer un controller exactement comme un controller de vue
this.clic = function(title){
alert(title);
}
}
}
}
});
app.directive('ngTabsChild', function(){
restrict: 'E',
transclude : true,
scope : {},
require : '^ngTabs' // recupère le $scope saisi dans la directive ng-tabs, le "^" est important. '^{nomDirective}',
link : function(scope, element, attrs, tabsCtrl){
element.click(function(){
tabsCtrl.clic(scope.title);
});
}
});