AngularJS Trigger ng-animate lors du changement de valeur de liaison
J'ai une directive où certains contenus sont liés via ng-html-bind-unsafe. J'aime avoir une transition lorsque le contenu change. Je peux utiliser jquery pour le supprimer, changer la valeur du contenu et le rétablir.
Y a-t-il une manière plus élégante avec AngularJS ?
3 réponses
Dans angular 1.2.0, vous pouvez utiliser une directive qui surveille les modifications de contenu et ajoute puis supprime les classes. Vous pouvez lier une animation à ces ajouts et suppressions de classe qui déclenchent l'effet de décoloration que vous recherchez.
module.directive('contentChange', function(){
return {
scope: {
content: '='
},
template: '<span ng-bind-html="myContent"></span>',
link: function(scope, element, attrs){
scope.$watch('content', function(){
//add fader class to element
scope.myContent = content;
//remove fader class from element
});
};
});
Voici un article populaire sur les animations 1.2: http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html
Je pense qu'il existe un meilleur moyen qui n'implique aucun nouveau code JS autre que l'inclusion de ngAnimate.
Prenez cet exemple:
<span class="my-example value-{{myValue}}">{{myValue}}</span>
En définissant une classe qui utilise la valeur, je peux utiliser les capacités ngAnimate pour les changements de classe.
Dans mon SCSS (ou moins) j'écrirais:
span.my-example{
display: inline-block;
padding: 0 3px;
background-color: white;
transition: background-color 0.26s linear 0s;
&[class*="-add"] {
background-color: yellow;
}
}
Et voilà! La couleur d'arrière-plan changerait en jaune et en arrière chaque fois que la valeur changerait lorsque ngAnimate ajouterait et supprimerait automatiquement des classes comme 'value-2-add', 'value-10-add', etc...
J'ai rencontré un problème similaire en essayant de mettre en surbrillance du texte lors d'une liaison de données. Mon but est de mettre en évidence le texte qui est en cours de modification pour une interface utilisateur plus lisse. Du point de vue de L'interface utilisateur, cela garantit que l'utilisateur sait ce qui est changé pendant qu'il remplit un formulaire.
Voici ce que j'ai appris (j'ai attaché une violon ci-dessous)
Tout d'Abord, vous ne souhaitez pas utiliser la montre. Cela créera un cycle désagréable de true:: false sur ng-class et ne produira donc pas un transition propre.
Deuxièmement, Vous ne pouvez pas penser à angular comme jquery où vous trouvez un élément et le changez. La clé de angular est la réutilisabilité, dont mes tentatives initiales manquaient gravement.
Troisièmement, événements tels que ng-focus, ng-flou, ng-click, (... et beaucoup plus), sont le pain et le beurre pour obtenir les résultats que je voulais.
Ma solution est d'utiliser ng et ng-flou de détecter lorsqu'une entrée a été édité
<input ng-focus="highlight('name')" ng-blur="doneHighlight('name')"
ng-model="user.name" />
Pendant ng-focus j'appelle un mettez en surbrillance la fonction et en passant par un argument appelé "nom". Cet argument est la clé de la réutilisabilité.
$scope.highlight = function(className){
$scope.toggle = className;
}
Une fois passé, toggle est égal à l'argument.
Voici le kicker...
<div ng-class="{'toggle': toggle=='name', 'noToggle': toggle=='name'+false}">
{{user.name}}
</div>
Lorsque toggle est = = à l'argument passé, la surbrillance est appliquée quand elle est == à 'name' + false, La classe 'noToggle' est appliquée avec l'animation unhighlight lisse.
Attends... et ng-blur? Je suis heureux que vous avez demandé! ng-blur appelle une fonction' doneHighlight' et passe le même argument de classe.
$scope.doneHighlight = function(className){
$scope.toggle = className + false;
}
Cependant, lors du passage de l'argument, il attache également une valeur false à la fin du classname. C'est une mentalité différente jQuery, mais me permet de réutiliser les fonctions du contrôleur pour autant d'éléments que nécessaire;
J'espère que cela a aidé! Je suis heureux de répondre à d'autres questions.