Comment puis-je appliquer un AngularJS directive basée sur une classe définie par ng-classe?

Je suis en train de conditionnellement appliquer une directive à un élément en fonction de sa classe.

Ici est un cas simple de mon problème, voir les résultats dans ce violon. Pour cet exemple, je suis en utilisant la carte des noms de classe pour les booléens forme de ng-class avec true; dans mon cas je voudrais utiliser le booléen résultat d'une fonction.

Balisage:

<div ng-app="example">
  <div class="testcase">
    This will have the directive applied as I expect
  </div>
  <div ng-class="{'testcase':true}">
    This will not have the directive applied but I expect it to
  </div>
</div>

JS:

angular.module('example', [])
  .directive('testcase', function() {
      return {
          restrict: 'C',
          link: function(scope, element, attrs) {
              element.css('color', 'red');
          }
      }
    }
  );

Pourquoi n'est-ce pas à cette directive à la div que l'obtention de sa classe à travers ng-class? Suis-je un malentendu quelque chose au sujet de l'ordre dans lequel AngularJS est le traitement de directives?

Comment devrais-je être conditionnellement l'application d'une directive à un élément basé sur l'évaluation d'une expression?

Je n'étais pas en mesure de trouver la réponse, mais pour ce que ça vaut, dans mon test, la classe a ÉTÉ d'obtenir activé ou désactivé, il n'a tout simplement pas appliquer la directive de la fonction. Pourquoi ne pas essayer de passer un vrai/faux de l'état dans la directive? c'est à dire <input my-directive toggle="true"> Voici mon violon. Inspecter la 2e ligne et cliquez sur le bouton à bascule pour montrer à la classe de l'ajout et de la suppression. jsfiddle.net/eg4zg
d'avoir à faire ng-class="{true: 'testcase', false: ''} [flip == true]" semble que beaucoup de code inutile lors de ma lecture de l'angle de docs suggèrent que ng-class="{'testcase': true}" devraient fonctionner de la même manière...
La classe ne sont calculés qu'après les directives sont compilés, donc peut-être pas une bonne façon d'aller à ce sujet. Semble être une meilleure approche de ce qui pourrait être à la charge angulaire modèle basé sur votre objet.
J'ai créé un github billet pour vous github.com/angular/angular.js/issues/3854
merci @sza! J'ai sauté dans la discussion là-bas.

InformationsquelleAutor carols10cents | 2013-09-03

angularjs angularjs-directive

24

ng-class juste des ensembles de classes sur le DOM, après le processus de compilation.

Peut-être une meilleure façon d'appliquer la directive serait par le biais d'un attribut HTML:
```
<div test-case>
```
Bien sûr, ce n'est pas conditionnel, mais je laisse la climatisation à la directive:
```
<div ng-app="example" ng-controller="exampleCtrl">
    <div test-case condition="dynamicCondition">Hello</div>
    <input type="checkbox" ng-model="dynamicCondition"/> Condition 
</div>
```
et
```
angular.module('example', [])
    .controller('exampleCtrl', function ($scope) {
        $scope.dynamicCondition = false;
    })
    .directive('testCase', function () {
    return {
        restrict: 'A',
        scope: {
            'condition': '='
        },
        link: function (scope, element, attrs) {
            scope.$watch('condition', function(condition){
                if(condition){
                    element.css('color', 'red');
                }
                else{
                    element.css('color', 'black');
                };
            });
        }
    }
});
```
Avis au nom de la directive est testCaseplutôt que testcase, le scope: {'condition': '='}, peu s'assure que la condition de l'attribut est synchronisé et disponible comme scope.condition et la watch évalue le deuxième argument à chaque fois que l'expression sur le premier changement de valeur. JsFiddle ici.

Peut-être vous devriez également regarder dans ng-switch:
```
<div ng-switch="conditionFunction()">
  <div ng-when="true" test-case>Contents when conditionFunction() returns true</div>
  <div ng-when="false">Contents when conditionFunction() returns false</div>
</div>
```
- Pourquoi est-il mieux pour la directive de décider de l'appliquer ou pas, quand angulaire a déjà le mécanisme de décider si ou de ne pas appliquer une directive fondée sur la présence ou l'absence d'un attribut de classe, d'élément ou un commentaire?
- Je vois la directive, un peu comme une classe, que la définition d'un objet. Comme, "cet objet est un cas de test et devrait se comporter de cette manière". Il me semble étrange de faire que identitity dépend de quelque chose d'extérieur.
- Dans mon premier exemple, la directive décide qu'il est behaviuor sur la base des attributs de l'élément (donc c'est peut-être mieux adapté lorsqu'il n'est pas un "tout ou rien" de la situation). Dans mon deuxième exemple, ng-switch décide si l'élément va être un cas de test ou pas.
- Alors que les deux exemples pour atteindre le but que je suis en train de l'atteindre, ils se sentent comme beaucoup de répétitif, code inutile quand il semble que l'angle de la fonction "définir une classe conditionnellement à l'aide de ng-classe et une carte des classes de valeurs booléennes" et la fonction "appliquer une directive fondée sur la présence d'une classe" doit pouvoir être combiné proprement, sans duplication. Si la réponse est "non, angulaire n'a tout simplement pas le faire", alors que c'est très bien, juste inattendu 🙂
- Pourquoi avez-vous besoin d'un nouveau champ d'application? Tu ne peux pas utiliser le même champ d'application que le contrôleur?
InformationsquelleAutor Jair Trejo

angular.module('example', [])
  .directive('testCase', function() {
      return {
          restrict: 'C',
          link: function(scope, element, attrs) {
            element.css('color', 'red');
          }
      }
    })

Problème de syntaxe était là..modifié le code posté.

InformationsquelleAutor Punnith DJ

Selon moi, ne pas utiliser un conditionnel directive basée sur une classe définie par ng-classe comme à cette question.

De ne pas utiliser cette

<div ng-app="example">
  <div class="testcase">
    This will have the directive applied as I expect
  </div>
  <div ng-class="{'testcase':true}">
    This will not have the directive applied but I expect it to
  </div>
</div>

parce que c'est vraiment très compliqué de gérer une situation complexe, il faut donc toujours utiliser des conditions dans votre personnalisé directive.

Utiliser cette

link: function (scope, element, attrs) {
    scope.$watch('condition', function(condition){
        if(condition){
            //something going here
        }
        else{
            //something going here
        };
    });
}

InformationsquelleAutor Gaurav

Vous devez vous connecter pour publier un commentaire.