AngularJS: przekazywanie wartości boolowskiej do dyrektywy

Question

Nie mogę przekazać wartości boolowskiej do mojej dyrektywy.

Oto moja HMTL:

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

i dyrektywy:

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

Każda pomoc będzie mile widziane.

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> 

kątowa

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

Answer 2

Wewnątrz link, można uzyskać dostęp do atrybutu:

return { 
    // code 
    link: link 
} 

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

To będzie zmuszać wartość ciągu do Boolean (jeśli wartość ciąg jest „true”, to zwróci wartość true, w przeciwnym razie to będzie return false.)

Najważniejszą częścią jest konwersja ciągu znaków "true" lub "false" do postaci boolowskiej, ponieważ zarówno !!'true', jak i !!'false' zwracają wartość true. Zobacz this answer dla rozwiązania i rozszerzonej dyskusji.

Jeśli chcesz użyć wartości w kontrolerze, możesz zrobić ten sam wzór w obiekcie scope i przekazać go w przymuszonej formie do kontrolera połączonego.

Answer 3

Istnieją 3 parametry, które można przekazać do funkcji, które pracują nad dyrektywą łącza. Parametry są scope, element i .

1. scope podaje zakres kontrolera, któremu podlega dyrektywa.

2. element przekazuje informację o elemencie DOM, w którym jest on stosowany

3. przekazuje informacje o wszystkich atrybutów DOM, które znajdują się na elemencie atrybutów.

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

   })

Praca jsFiddle

Answer 4

Myślę najprostszą/najczystszych odpowiedź nie została jeszcze zawarte na to pytanie. Ta odpowiedź pasuje również w HTML5 Spec dla atrybutu Boolean - http://www.w3.org/TR/html5/infrastructure.html#boolean-attributes

2.5.2 Boolean atrybuty

Szereg atrybuty boolean atrybuty.Obecność atrybutu boolean na elemencie reprezentuje wartość true, a brak atrybutu reprezentuje wartość false.

Jeśli atrybut jest obecny, jego wartość musi być albo pusta struna lub wartość, która jest ASCII wielkości liter pasuje do nazwy kanonicznej atrybutu , bez prowadzącego lub końcowe białe znaki.

Wartości "true" i "false" nie są dozwolone dla atrybutów boolean. Aby reprezentować fałszywą wartość, należy całkowicie pominąć atrybut .

HTML:

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

I dyrektywy:

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

Prosty, pasuje czysto z HTML5 spec logicznych atrybuty i bez konieczności zmuszenia ciąg do zmiennej Zakres ('requiredParam': '=').

Uwaga w powyższym przykładowym kodzie, jeśli zostanie minified, wymagane zmienne $scope i $attrs zostaną zmienione na krótszy ciąg znaków i złamany kod, ale jest to kolejny problem.