<p ng-copy="blockCopy($event)">This paragraph cannot be copied</p>
Dans le contrôleur
$scope.blockCopy = function(event) { event.preventDefault();
console.log("Copying won't work"); }
ngPaste
La directive ngPaste spécifie un comportement personnalisé à exécuter lorsqu'un utilisateur colle du contenu
<input ng-paste="paste=true" ng-init="paste=false" placeholder='paste here'> pasted: {{paste}}
ngHref
de la valeur href. La directive ngHref remplace l'attribut href d'origine d'une balise html en utilisant l'attribut href tel que tag, tag etc.
La directive ngHref s'assure que le lien n'est pas rompu même si l'utilisateur clique sur le lien avant qu'AngularJS n'ait évalué le code.
Exemple 1
<div ng-init="linkValue = 'http://stackoverflow.com'">
<p>Go to <a ng-href="{{linkValue}}">{{linkValue}}</a>!</p> </div>
Exemple 2 Cet exemple extrait dynamiquement la valeur href de la zone de saisie et la charge en tant que valeur href.
<input ng-model="value" />
<a id="link" ng-href="{{value}}">link</a>
Exemple 3
<script>
angular.module('angularDoc', [])
.controller('myController', function($scope) { // Set some scope value.
// Here we set bootstrap version. $scope.bootstrap_version = '3.3.7'; // Set the default layout value $scope.layout = 'normal'; });
</script>
<!-- Insert it into Angular Code -->
<link rel="stylesheet" ng-href="//maxcdn.bootstrapcdn.com/bootstrap/{{ bootstrap_version }}/css/bootstrap.min.css">
<link rel="stylesheet" ng-href="layout-{{ layout }}.css">
ngList
La directive ng-list est utilisée pour convertir une chaîne délimitée depuis une entrée de texte vers un tableau de chaînes ou inversement.
La directive ng-list utilise un délimiteur par défaut de ", " (espace virgule).
Vous pouvez définir le délimiteur manuellement en assignant à ng-list un délimiteur tel que ng- list="; " .
Dans ce cas, le délimiteur est défini sur un point-virgule suivi d'un espace.
Par défaut, ng-list a un attribut ng-trim qui est défini sur true. ng-trim quand faux, respectera
l'espace blanc dans votre délimiteur. Par défaut, ng-list ne prend pas en compte les espaces
Exemple:
angular.module('test', [])
.controller('ngListExample', ['$scope', function($scope) { $scope.list = ['angular', 'is', 'cool!'];
}]);
Un délimiteur de client est configuré pour être ; . Et le modèle de la zone de saisie est défini sur le tableau créé dans la portée.
<body ng-app="test" ng-controller="ngListExample"> <input ng-model="list" ng-list="; " ng-trim="false"> </body>
La zone de saisie affiche le contenu: angular; is; cool!
Chapitre 17: Directives sur mesure
Introduction
Vous en apprendrez davantage sur la fonctionnalité de directives d'AngularJS. Vous trouverez ci- dessous des informations sur les directives, ainsi que des exemples élémentaires et avancés de leur utilisation.
Paramètres
Paramètre Détails
portée Propriété pour définir le champ d'application de la directive. Il peut être défini sur false, true ou comme une portée d'isolat: {@, =, <, &}.
scope: faux La directive utilise la portée parent. Aucune portée créée pour la directive.
scope: true
La directive hérite prototypiquement de la portée parent en tant que nouvelle étendue enfant. S'il existe plusieurs directives sur le même élément demandant une nouvelle étendue, elles partageront une nouvelle étendue.
portée: { @ }
Liaison à sens unique d'une propriété de portée directive à une valeur d'attribut DOM. En tant que valeur d'attribut liée au parent, elle changera dans la portée de la directive.
scope: {=} Liaison d'attribut bidirectionnelle qui modifie l'attribut dans le parent si l'attribut de directive change et inversement.
scope: {<}
Liaison à sens unique d'une propriété de portée directive et d'une
expression d'attribut DOM. L'expression est évaluée dans le parent. Cela surveille l'identité de la valeur parente afin que les modifications apportées à une propriété d'objet dans le parent ne soient pas reflétées dans la directive. Les modifications apportées à une propriété d'objet dans une directive seront reflétées dans le parent, puisque les deux font référence au même objet
portée: { & } Permet à la directive de transmettre des données à une expression à évaluer dans le parent.
Cette fonction est utilisée pour effectuer une transformation DOM sur le modèle de directive avant l'exécution de la fonction de lien. Il accepte
tElement (le modèle de directive) et tAttr (liste des attributs déclarés sur la directive). Il n'a pas accès à la portée. Il peut renvoyer une fonction qui sera enregistrée en tant que post-link ou renvoyer un objet avec pre
propriétés pre et post avec sera enregistré en tant que fonctions de pre-
compiler: fonction
Paramètre Détails
link et post-link .
lien: fonction / objet
La propriété link peut être configurée en tant que fonction ou objet. Il peut recevoir les arguments suivants: scope (directive scope), iElement
(élément DOM où directive est appliquée), iAttrs (collection d'attributs d'élément DOM), controller (tableau de contrôleurs requis par directive), transcludeFn. Il est principalement utilisé pour configurer les écouteurs DOM, regarder les propriétés du modèle pour les modifications et mettre à jour le DOM. Il s'exécute après le clonage du modèle. Il est configuré indépendamment s'il n'y a pas de fonction de compilation.
fonction de pré- lien
Fonction de lien qui s'exécute avant toute fonction de lien enfant. Par défaut, les fonctions de lien de directive enfant s'exécutent avant les fonctions de lien de directive parent et la fonction de pré-lien permet au parent de créer le premier lien. Un cas d'utilisation est si l'enfant a besoin de données du parent.
fonction post- lien
Fonction de lien que les cadres après les éléments enfants sont liés au parent. Il est couramment utilisé pour attacher des gestionnaires
d'événements et accéder aux directives enfants, mais les données requises par la directive enfant ne doivent pas être définies ici car la directive enfant a déjà été liée.
restrict: string
Définit comment appeler la directive depuis le DOM. Valeurs possibles (en supposant que le nom de notre directive est demoDirective ): E - Nom de l'élément ( <demo-directive></demo-directive> ), A - Attribut ( <div demo- directive></div> ), C - Classe correspondante ( <div class="demo-
directive"></div> ), M - Par commentaire ( <!-- directive: demo-directive - -> ). La propriété restrict peut également prendre en charge plusieurs options, par exemple - restrict: "AC" restreindra la directive à Attribute OR Class . Si elle est omise, la valeur par défaut est "EA" (élément ou attribut).
exiger:
'demoDirective'
Localisez le contrôleur de demoDirective sur l'élément actuel et injectez son contrôleur comme quatrième argument de la fonction de liaison. Jeter une erreur si non trouvé.
require: '? demoDirective'
Essayez de localiser le contrôleur de demoDirective ou transmettez null au lien fn si non trouvé.
exiger: '^ demoDirective'
Localisez le contrôleur de demoDirective en recherchant l'élément et ses parents. Jeter une erreur si non trouvé.
require: '^^ demoDirective'
Localisez le contrôleur de demoDirective en recherchant les parents de l'élément. Jeter une erreur si non trouvé.
Paramètre Détails
demoDirective' l'élément et ses parents ou transmettez null au lien fn s'il n'est pas trouvé.
exiger: '? ^^ demoDirective'
Essayez de localiser le contrôleur de demoDirective en recherchant les parents de l'élément, ou passez null au lien fn s'il n'est pas trouvé.