Moniteur de changement de classe sur l'élément dans AngularJS directive
Lorsqu'une classe est ajouté à un élément, je veux ajouter une autre classe à l'élément. Lorsqu'une classe est supprimée, je veux supprimer un élément. Je suis à la base de la cartographie de certaines classes de bootstrap pour certains angulaire de la validation du formulaire les classes, mais je ne peux pas comprendre comment le feu de mon code quand une classe est ajouté/supprimé à partir d'un élément (également de vous assurer de ne pas causer de certains boucle infinie de changement de classe).
Voici ce que j'ai à ce jour pour mon directive:
.directive('mirrorValidationStates', ['$log', function($log) {
function link(scope,element,attrs) {
scope.$watch(element.hasClass('someClass'), function(val) {
var classMap = {
'popupOn': 'has-error',
'ng-valid': 'has-success'
};
for (var key in classMap) {
if (element.hasClass(key)) {
$log.info("setting class " + classMap[key]);
element.parent().addClass(classMap[key]);
} else {
$log.info("removing class " + classMap[key]);
element.parent().removeClass(classMap[key]);
}
}
});
}
return {
link: link
};
}]);
Donc, fondamentalement, lorsque popupOn
est ajouté à un élément, je tiens à ajouter le has-error
classe de bootstrap à l'élément parent. Lorsque popupOn
est supprimé, je veux supprimer has-error
.
Ce qui me manque pour que cela se produise dans Angulaire? Peut-être quelque chose avec ng-classe et ne pas utiliser une directive?
Merci beaucoup!
Vous devez vous connecter pour publier un commentaire.
œuvres ici
Vous pouvez essayer cette construction, afin de suivre les changements de classe:
Veuillez notez que l'ajout de/suppression de classes idée que la montre va provoquer un appel de plus de l'ajout de la classe qui a coutume de classe changement de la valeur de l'attribut.
Mais je pense que la meilleure approche à l'aide de ng-classe. Par exemple, dans un moment où vous voulez ajouter un "popupOn' classe, vous êtes à la définition de certains étendue valeur ($champ d'application.popup = true), puis spécifiez ng-classe pour le parent et l'enfant de l'élément comme suit:
lorsque vous souhaitez supprimer ces classes que vous venez de définir $champ d'application.popup valeur false
Jouer avec ng-classe
popup == true
- Je ajouter/supprimer la catégorie: