Jak stworzyć tę niestandardową kontrolę za pomocą dyrektywy AngularJS?

Question

Jestem nieco nowego do angularjs i próbuję napisać niestandardowy wybierz sterowania oparty na zwyczaju ZURB Fundacji wybrać (patrz tutaj: http://foundation.zurb.com/docs/components/custom-forms.html)

wiem, że trzeba użyć dyrektywy do tego, ale nie jestem pewien, w jaki sposób aby to osiągnąć.

Będzie to musiało być wielokrotnego użytku i pozwala na iterację, niezależnie od tego, jaka tablica jest przekazywana do niego. Wymagane jest wywołanie zwrotne, gdy użytkownik wybierze element z listy rozwijanej.

Oto znaczników dla niestandardowej listy rozwijanej założenia:

<select name="selectedUIC" style="display:none;"></select> 
    <div class="custom dropdown medium" style="background-color:red;"> 
     <a href="#" class="current custom-select">Please select item</a> 
     <a href="#" class="selector custom-select"></a> 
     <ul ng-repeat="uic in uics"> 
      <li class="custom-select" ng-click="selectUIC(uic.Name)">{{uic.Name}}</li> 
     </ul> 
    </div> 

Działa to na razie. Jestem w stanie wypełnić kontrolkę z Ctrl na tej stronie. Jednak, jak widać, musiałbym to zrobić za każdym razem, gdy chciałem użyć niestandardowego kontrolka rozwijania.

Jakieś pomysły, w jaki sposób mogę zmienić to dziecko w dyrektywę wielokrotnego użytku?

Dzięki za pomoc!

Chris

Answer 1

Jeśli chcesz, aby twoje dyrektywy były wielokrotnego użytku nie tylko na tej samej stronie, ale w wielu aplikacjach AngularJS, to jest całkiem wygodne, aby ustawić je w swoim własnym module i zaimportować ten moduł jako zależność w Twojej aplikacji.

Wziąłem Cunk Voa na pnkr powyżej (więc początkowe uznanie idzie do niego) i oddzieliłem to podejściem.Teraz oznacza to, że jeśli chcesz utworzyć nową dyrektywę, po prostu dodaj ją do reusableDirectives.js, a wszystkie aplikacje, które już mają zaległości w postaci ['reusableDirectives'], będą mogły używać tej nowej dyrektywy bez konieczności dodawania dodatkowych js do tej konkretnej aplikacji.

Przeniosłem także znaczniki dyrektywy do własnego szablonu HTML, ponieważ jest on łatwy do odczytania, edytowania i utrzymywania, ponieważ jest bezpośrednio w dyrektywie jako ciąg znaków.

Plnkr Demo

HTML

<zurb-select data-label="{{'Select an option'}}" data-options="names" 
    data-change-callback="callback(value)"></zurb-select> 

app.js

// Add reusableDirectives as a dependency in your app 
angular.module('angularjs-starter', ['reusableDirectives']) 
.controller('MainCtrl', ['$scope', function($scope) { 
    $scope.names = [{name: 'Gavin'}, {name: 'Joseph'}, {name: 'Ken'}]; 
    $scope.callback = function(name) { 
    alert(name); 
    }; 
}]); 

reusableDirectives.js

angular.module('reusableDirectives', []) 
.directive('zurbSelect', [function(){ 
    return { 
    scope: { 
     label: '@', // optional 
     changeCallback: '&', 
     options: '=' 
    }, 
    restrict: 'E', 
    replace: true, // optional 
    templateUrl: 'zurb-select.html', 
    link: function(scope, element, attr) { } 
    }; 
}]); 

ZURB-select.html

<div class="row"> 
    <div class="large-12 columns"> 
    <label>{{label || 'Please select'}}</label> 
    <select data-ng-model="zurbOptions.name" data-ng-change="changeCallback({value: zurbOptions.name})" 
     data-ng-options="o.name as o.name for o in options"> 
    </select> 
    </div> 
</div> 

Answer 2

Czy czegoś takiego szukasz?

http://plnkr.co/edit/wUHmLP

W powyższym przykładzie można przekazać w dwóch parametrów atrybut niestandardowego dyrektywy zurbSelect. Opcje to lista wybranych obiektów opcji z atrybutem name, a clickCallback to funkcja dostępna w zasięgu kontrolera, którą dyrektywa ma wywoływać, gdy użytkownik kliknie sekcję.

Zauważ, że w funkcji linku nie ma kodu (w tym miejscu zwykle podążałaby logika Twojej dyrektywy). Wszystko, co robimy, polega na zawijaniu szablonu, dzięki czemu można go wielokrotnie używać i akceptować niektóre parametry.

Stworzyliśmy odizolowany zakres, więc dyrektywa nie musi zależeć od zakresów nadrzędnych. Powiązaliśmy izolowany zakres z przekazanymi parametrami atrybutu. "&" oznacza powiązanie z wyrażeniem w zasięgu nadrzędnym, wywołującym to (w naszym przypadku funkcję zwrotną dostępną w naszym kontrolerze), a '=' oznacza utworzenie dwukierunkowego wiązania między atrybutem opcji, więc gdy zmienia się w zakresie wychodzącym, zmiana jest odzwierciedlana tutaj i odwrotnie.

Ograniczamy także stosowanie tej dyrektywy tylko do elementów(). Można ustawić to do klasy, atrybuty itp ..

Więcej szczegółów prowadnica angularjs dyrektyw jest naprawdę dobry:

http://docs.angularjs.org/guide/directive

nadzieję, że to pomaga.