Direttive AngularJs - come ottenere i valori degli attributi dalla direttiva

Question

Qualche idea su come accedere ai valori degli attributi dall'interno della direttiva?

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'); 
      }; 
     }]); 

codice HTML è:

<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> 

Grazie

Answer 1

Uso $observe:

Osservando interpolata attributi: Uso $observe per osservare la variazione di valore di attributi che contengono interpolazione (ad esempio src="{{bar}}"). Non solo è molto efficiente, ma è anche l'unico modo per ottenere facilmente il valore effettivo perché durante la fase di collegamento l'interpolazione non è stata ancora valutata e quindi il valore è in questo momento impostato su undefined. - directives doc

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

Come @FMM menzionato in un commento, data si spoglia da angolare quando normalizza il nome dell'attributo, quindi l'uso di key sopra, anziché dataKey.

Answer 2

provare attrs["dataKey"] - questo è il modo in cui HTML analizza gli attributi con trattino (-). se si desidera che il valore dal campo di applicazione, invece di {{something}}, si possono fare due cose:

scope[attrs['dataKey']] - funzionerà ma non dovrebbe fare questo

o utilizzare $parse ma allora non usare `` {{ }} `

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'); 
    }; 
}]); 

oppure è possibile utilizzare $interpolate allo stesso modo come $parse ma con {{}}

Answer 3

Io suggerirei di usare la notazione oggetto se si è all'interno della funzione di collegamento della direttiva, che ottiene il parametro attrs:

attrs.yourAttributeName

Answer 4

strisce angolari 'dati-' fuori gli attributi, quindi se il tuo attributo è 'data-key', usa solo 'chiave', non 'dataKey'