AngularJS: passaggio valore booleano alla direttiva

Question

Non riesco a passare il valore booleano alla mia direttiva.

Ecco il mio HTML:

<city-zip city="clientCity" zip="clientZip" requiredParam="'true'"></city-zip> 

e la direttiva:

.directive('cityZip', function() { 
    return { 
     restrict: 'E', 
     templateUrl: '../templates/templateCityZip.html', 
     scope: { 
      city: '=', 
      zip: '=' 
     }, 
     controller: function($scope) {} 
    } 
}); 

Qualsiasi aiuto sarebbe molto apprezzato.

Answer 1

HTML

<city-zip city="clientCity" zip="clientZip" required-param="true"></city-zip> 
<city-zip city="clientCity" zip="clientZip" required-param="{{ someBooleanValue }}"></city-zip> 

angolare

.directive('cityZip', function() { 
    return { 
     restrict: 'E', 
     templateUrl: '../templates/templateCityZip.html', 
     scope: { 
      city: '=', 
      zip: '=', 
      requiredParam:'@' 
     }, 
     link: function(scope) { 
      console.log("requiredParam", scope.requiredParam); 
     } 
    } 
}) 

Answer 2

All'interno link, è possibile accedere l'attributo:

return { 
    // code 
    link: link 
} 

function link(scope, $el, attrs) { 
    var requiredParam = attrs.requiredParam === 'true'; 
} 

Che verrà costringere il valore di stringa per un valore booleano (se il valore stringa è 'vero', che restituisca vero, altrimenti sarò return false.)

La parte principale qui è come convertire un valore di stringa "true" o "false" nella sua forma booleana, poiché !!'true' e !!'false' restituiscono entrambi true. Vedi this answer per la soluzione e discussione estesa.

Se è necessario utilizzare il valore nel controller, è possibile eseguire lo stesso modello nell'oggetto scope e passarlo nel modulo coercitato al controller accoppiato.

Answer 3

Ci sono 3 parametri che è possibile passare alla funzione di collegamento che funzionano sulla direttiva. I parametri sono scope, element e attributes.

1. scope indica l'ambito del controller a cui è applicata la direttiva.

2. element passa le informazioni relative all'elemento DOM su cui è applicato

3. attributi passa le informazioni su tutti gli attributi dell'elemento DOM che sono sull'elemento.

   <city-zip ng-app="myapp" city="clientCity" zip="clientZip" required-param="true"></city-zip> 
   
   angular.module("myapp", []).directive('cityZip', function() { 
   return { 
       restrict: 'E', 
       templateUrl: '', 
       scope: { 
        requiredParam:'@' 
       }, 
       link: function(scope, $el, attrs) { 
        alert(attrs.requiredParam); 
       } 
   } 
   

   })

Lavorare jsFiddle

Answer 4

Penso che la risposta più semplice/pulito non è ancora stato incluso per questa domanda. Questa risposta si inserisce anche all'interno della HTML5 Spec per un attributo booleano - attribuisce http://www.w3.org/TR/html5/infrastructure.html#boolean-attributes

2.5.2 booleano

una serie di attributi sono attributi booleani.La presenza di un attributo booleano su un elemento rappresenta il valore vero e l'assenza dello attributo rappresenta il valore falso.

Se l'attributo è presente, il suo valore deve essere o la stringa vuota o un valore che è una corrispondenza case-insensitive ASCII per nome canonico dell'attributo , senza spazi iniziali o finali.

I valori "true" e "false" non sono consentiti sugli attributi booleani. Per rappresenta un valore falso, l'attributo deve essere omesso del tutto.

HTML:

<city-zip city="clientCity" zip="clientZip" requiredParam></city-zip> 

e la direttiva:

.directive('cityZip', function() { 
    return { 
     restrict: 'E', 
     templateUrl: '../templates/templateCityZip.html', 
     scope: { 
      city: '=', 
      zip: '=' 
     }, 
     controller: function($scope, $attrs) { 
      $scope.requiredParamExists = $attrs.hasOwnProperty('requiredParam'); 
     } 
    } 
}); 

Semplice, si adatta in modo pulito con HTML5 spec per gli attributi booleani, e non c'è bisogno di forzare una stringa ad una variabile ambito ('requiredParam': '=').

Nota nel codice di esempio sopra riportato, se minified, le variabili richieste $scope e $attrs cambieranno in una stringa più breve e interromperanno il codice, ma questo è un altro problema.