AngularJs directives - comment obtenir des valeurs d'attributs à partir de la directive

Aucune idée de comment accéder à des valeurs d'attributs à partir de l'intérieur de la directive?

    angular.module('portal.directives', [])
        .directive('languageFlag', ['$routeParams', function(params) {
            return function(scope, element, attrs) {
                console.log(attrs["data-key"]); //returns undefined
                console.log(element.attr('data-key')); //returns {{data-key}}
                angular.element(element).css('border', '1px solid red');
            };
        }]);

Code Html est:

<ul>
    <li ng-repeat="lng in flags">
        <a class="lngFlag {{flag.Key}}" data-key="{{flag.Key}}" data-id="{{lng.Id}}" ng-click="changeLangHash({'lng':lng.Id })" language-flag></a>
    </li>
</ul>

Grâce

il suffit de suivre chameau cas dans le cas du tableau de bord -

OriginalL'auteur Ashraf Fayad | 2013-04-30

  1. 23

    Utilisation $observe:

    Observation interpolées attributs: Utilisation $observe d'observer les changements de valeur des attributs qui contiennent de l'interpolation (par exemple src="{{bar}}"). Ce n'est pas seulement très efficace mais elle est aussi la seule façon d'obtenir facilement la valeur réelle, car lors de la liaison de la phase de l'interpolation n'a pas encore été évalué et donc la valeur est en ce moment à undefined. -- directives doc

    return function(scope, element, attrs) {
    attrs.$observe('key', function(value) {
        console.log('key=', value);
    });
}

    @FMM mentionné dans un commentaire, data est dépouillé par Angulaire au moment de normaliser le nom de l'attribut, d'où l'utilisation de key ci-dessus, plutôt que de dataKey.

    Merci. Il fonctionne sur tous les attributs sauf pour ceux avec un serpent notations. Comme les données de quelque chose. Mais j'accepte votre réponse, car elle fonctionne avec d'autres attributs. Je vous remercie de votre effort et de temps.
    Il est probable que angulaire est taillé la data préfixe (docs.angularjs.org/guide/directive): "Éventuellement, la directive peut être préfixé avec x-, ou de données - pour en faire le validateur HTML conforme." C'est probablement une mauvaise idée de commencer votre (logique) les noms d'attribut avec des "données".

    OriginalL'auteur Mark Rajcok

  2. 10

    essayer attrs["dataKey"] - c'est la façon dont le code html analyse des attributs avec des tirets (-).
    si vous voulez que la valeur du champ au lieu de {{something}}, vous pouvez faire deux choses:

    scope[attrs['dataKey']] - va fonctionner, mais ne devrait pas

    ou de l'utilisation $parse mais alors n'utilisez pas `{{}}`

    app.directive('languageFlag', ['$routeParams','$parse', function(params,$parse) {
  return function(scope, element, attrs) {
    var value =  $parse(attrs.dataKey)(scope);
    console.log(value);
    angular.element(element).css('border', '1px solid red');
  };
}]);

    ou vous pouvez utiliser $interpoler de la même manière comme $parse mais avec {{}}

    Merci de répondre. console.log(attrs["dataKey"]); // = undefined console.log(champ d'application[attrs['dataKey']]); // = undefined j'ai même supprimé tous les {{}} et ai essayé .$analyser, mais encore "indéfini". N'est-ce pas là une façon d'accéder au modèle sous-jacent au moment de la liaison?
    En passant parent à l' $parse (ex: $parse(attrs.uid)($scope.$parent) ) a résolu mon problème
    Mais que faire si l'attribut est affectée de la valeur? Mon code ne l'analyser sur la directive de la charge, mais jamais d'avis que les modifications apportées à la variable (à partir de la portée parent).

    OriginalL'auteur g00fy

  3. 4

    angulaire des bandes de données "hors les attributs, donc si votre attribut "data-key", il suffit d'utiliser la touche", pas "dataKey'

    J'ai un attribut avec le nom "data-actiontype" avec juste actiontype je ne suis pas d'obtenir les données à partir de cet attribut. Est le nom d'un prédéfini ?
    Difficile à dire sans voir votre code. J'espère que vous avez pensé à elle depuis que vous avez demandé il y a 14 heures. Si non, vous devriez être en mesure de regarder les réponses sur cette page et essayer un couple de différentes choses, de les comprendre.
    Merci pour votre réponse. Veuillez voir mon tag ci-dessous <input type="button" value="Ok" id="" ng-click="getAttributejs($event)" class="" data-actiontype="kathir" /> Actuellement, je suis retrait data- de la balise. Je ne suis pas compris encore.
    vous pourriez poster une nouvelle question, je et tout le monde a vraiment besoin de voir votre angulaire de la directive de code. Ça risque de recevoir des réponses assez rapidement. Ou mettre en place un codepen/JSfiddler et de fournir ce lien

    OriginalL'auteur Michael Tranchida

  4. 1

    Je suggère l'utilisation d'object notation si vous êtes à l'intérieur de la fonction de lien de la directive, qui obtient le attrs paramètre:

    attrs.yourAttributeName

    OriginalL'auteur Mickey Puri