arthur-eudeline
9/5/2018 - 2:42 PM

Directives - Angular.js

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);
		});
	}
});