2013-10-14 15 views
5

Tworzę niestandardową dyrektywę automatycznego uzupełniania, która używa w sobie samego <input>, ale mam problem z określeniem, jak przekazać atrybut "wymagany", inne atrybuty, które mają wartości, które widzę, ale "wymagane" "wydaje się puste, czy jest ustawione, czy nie. Pierwsza część mojego oświadczenia zwrotnego poniżej:Czy można przekazać "wymagane" do dyrektywy AngularJS?

return { 
      restrict: 'E', 
      template: tpl, 
      replace: true, 
      scope: { 
       suggestionsPath: '=autoComplete', 
       method: '@method', 
       term: '@term', 
       required: '@required', 
       ngModel: "=" 
      }... 

dziękuję!

+0

Możesz użyć 'ng-required' zamiast i' ngRequired' w swoim zakresie dyrektywy. – jpmorin

+2

Można również sprawdzić, co jest wewnątrz atrybutu 'attrs.required 'w funkcji łącza i sprawdzić, czy coś jest. – jpmorin

+1

Czy jest jakiś powód, dla którego potrzebujesz zakresu izolacji? Może wydawać się prostsze, ale często nie jest. Proponuję inne podejście, biorąc pod uwagę "ngModelController" i używając "attrs" i $ scope. $ Obejrzyj, jeśli potrzebujesz dynamicznego wiązania. Daj mi znać, jeśli chcesz bardziej kompletne rozwiązanie, jeśli napiszesz jsFiddle lub coś, spróbuję pomóc. –

Odpowiedz

4

Zbudowałem kilka rozszerzeń wejść i najlepszym (prawdopodobnie) jedynym sposobem rozszerzenia istniejących powiązań ngModel jest użycie ngModelController w twojej dyrektywie. Możesz wymagać innego kontrolera dyrektywy za pomocą właściwości "wymagaj". To pozwoli ci uzyskać/ustawić wartości modelu, a także rozszerzyć lub zastąpić zachowanie sprawdzania poprawności w razie potrzeby. Ponieważ prawdopodobnie rozszerzasz już dostępne dyrektywy wejściowe AngularJS, prawdopodobnie będziesz chciał spojrzeć na dyrektywy wejściowe wewnątrz AngularJS, aby zobaczyć przykłady tego działania. Mogą również pracować w stycznej z ngFormController jako rodzic dla całego formularza. Zabrało mi to trochę czasu, więc bądź cierpliwy, ale jest to zdecydowanie najlepszy sposób na zrobienie tego.

Chciałbym omijać tutaj zakresy izolatów, mogą one być trudne, nie zawsze dobrze współpracują z innymi dyrektywami (więc zazwyczaj używa się go tylko w nowych elementach lub rzeczach, w których tylko jedna dyrektywa będzie istnieć samodzielnie). Chciałbym zaprojektować coś takiego:

return { 
     restrict: 'E', 
     template: tpl, 
     replace: true, 
     require: 'ngModel', 
     link: function(scope, element, attrs, ngModelController) { 
      // Use attrs to access values for attributes you have set on the lement 
      // Use ngModelController to access the model value and add validation, parsing and formatting 
      // If you have an attribute that takes an expression you can use the attrs value along with $scope.$watch to check for changes and evaluate it or the $parse service if you just want to evaluate it. 
     } 

I polecam się jako znajomy, jak można z dyrektywą projektowania jak wejść niestandardowych można uzyskać bardzo skomplikowane zależności od tego, co robią (zbudowaliśmy własne wejścia, które dodają przycisków +/- jako a także takie, które formatują liczby jako procenty, waluty lub po prostu liczby z przecinkami podczas wpisywania). Oprócz docs ngModelController te są przydatne do przeglądu:

2

Wymagany jest sam w sobie zabawnym atrybutem (patrz tutaj: Setting an attribute named "required" and any value, with JQuery, doesn't work). Najprawdopodobniej będziesz mieć wiele problemów z przekazaniem jakiejkolwiek wartości przez to, ponieważ jego wpływ zależy od tego, czy jest obecny, a nie od jego wartości. Różne przeglądarki będą traktować je inaczej i mogą przepisać wartość.

Będziesz mieć również problemy, ponieważ zarówno required, jak i ngModel są dyrektywami, które zostaną skompilowane na twoim elemencie, jeśli są dostarczone. required będzie rozmawiać z ngModel i musisz wdrożyć ngModelproperly, jeśli chcesz, aby coś działało. Łatwiej jest zmienić nazwę required i ngModel na inne nazwy. na przykład myRequired i myNgModel. Następnie można związać ng-model bezpośrednio z scope.myNgModel i powiązać ng-required z myRequired.

1

wiem, jest to stara sprawa, ale dla innych, którzy przychodzą szukających (co jak tu trafiłem):

możesz przekazać wymagany tag do dyrektywy, aby odczytać go jako wartość logiczną, a następnie użyć tej wartości w ng-required.

return { 
    restrict: 'E', 
    template: tpl, 
    replace: true, 
    scope { 
     required:'@' 
    } 

Następnie w swoim dyrektywy szablonu by użyć go jako

<input type="text" ng-required="required" /> 

czy atrybut „wymagana” zostanie znaleziony, a następnie jest ustawiona na wartość true w dyrektywie, lub atrybut nie zostanie znaleziony, które będą być interpretowane przez ng-wymagane jako fałszywa wartość

+0

Właśnie tego szukałem. Następnie w swoim html możesz dodać "wymagane" lub go pominąć i zastanowić się nad dyrektywą. – Sagi

Powiązane problemy