AngularJS: direttive vs controller: quale logica mettere dove?

Question

Sono abbastanza nuovo da angolare e cerco di imparare davvero come organizzare il mio codice, in modo che i futuri collaboratori possano trovarlo rapidamente.

Una regola che conosco è "Se manipola il DOM, inseriscilo in una direttiva", su cui mi attengo.

Ma ci sono ancora dei momenti in cui non sono sicuro dove mettere i miei metodi, come posso inserire nell'app controller principale, in un controller fornito come opzione "controller" all'interno della direttiva o anche all'interno della funzione che si trova la direttiva (opzione "link").

Con filtri e servizi è abbastanza chiaro per me, ma con i controller e le direttive la linea diventa piuttosto sfocata. Ho già capito che anche con una piccola app ho diffuso parte del codice qua e là ed è già confuso, anche per me stesso. Quindi mi piacerebbe avere alcuni consigli per organizzare meglio il mio codice.

Quindi immagino che la mia domanda principale sia:
1) Esiste una buona regola empirica per sapere quale codice inserire dove?

O se questo è troppo astratto ecco alcuni esempi:
2) Ho una direttiva con un modello che uso solo all'interno della mia app. Qualcosa dovrebbe accadere, quando clicco sull'elemento. So già che è preferibile utilizzare la direttiva ng-click per legare un evento click all'interno della funzione collegata.
Ma dove dovrei definire il metodo fornito in ng-clic?

• A) Il controller principale dell'app.
• B) La funzione "link" della direttiva.
• C) Aggiungere un controller alla direttiva (utilizzando l'opzione "controller") e definirlo lì.

3) La risposta al 2) sarebbe diversa se prevedo di riutilizzare la direttiva altrove?

4) Scenario diverso:
Ho un pulsante e quando si fa clic e trascinato dovrebbe spostare un elemento completamente non correlato.
Dovrei ...

• A) Creare una direttiva e modello di influenza & comportamento sulla base di un attributo passato?
• B) Creare due direttive (una per la maniglia, una per l'elemento di destinazione)
  In caso affermativo, si pone nuovamente la questione di dove mettere i metodi per gestire il trascinamento?

Note:
sono a conoscenza le risposte potrebbero essere un po 'dipendente dal parere personale, ma ho un pò spero ci sono alcune "regole" o "modo giusto per farlo" a cui posso rispettare per il futuro sviluppo. Non ho incluso alcun codice per motivi di concisione. Se fosse necessario per una risposta sarei felice di fornirlo.

grazie per il vostro tempo.

Answer 1

1) Esiste una buona regola empirica per sapere quale codice inserire dove?

Un sacco di cose in gioco qui; e non sono sicuro che ci sia una battaglia "direttive vs controllori" in corso. Sembrano abbastanza diversi da me. Le direttive possono avere i loro controllori, se non lo sapevi.

Visualizzo le direttive come un singolo, specifico set di codice incapsulato che include HTML (vista) e codice JavaScript (controller). Io uso le direttive quando voglio riutilizzare qualcosa come componente "incapsulato".

Se ho solo un po 'di codice JavaScript che voglio riutilizzare; Inserirò un servizio AngularJS che vedo come una semplice raccolta di codice JavaScript senza HTML.

Ho una direttiva con un modello che utilizzo solo all'interno della mia app. Qualcosa dovrebbe accadere quando clicco sull'elemento. So già che è preferibile utilizzare la direttiva ng-click sull'associazione di un evento click all'interno della funzione collegata. Ma dove dovrei definire il metodo fornito in ng-clic?

Definirei il gestore come parte dell'ambito isolato della direttiva; qualcosa di simile:

scope: 
{    
    onButtonClick: '&onButtonClick' 
} 

Definire il comportamento predefinito come parte del collegamento o del controller della direttiva.

link: function ($scope, element, attrs) { 
    $scope.myDefaultButtonClick = function(){ 
    // do stuff 
    } 

     this.onInit = function(){ 
      if(!$scope.onButtonClick){ 
       $scope.onButtonClick = $scope.myDefaultButtonClick; 
      } 
     } 
     this.onInit(); 
} 

Nel tuo JavaScript; puoi chiamare la funzione passata come argomento:

$scope.onButtonClick(); 

E puoi fare lo stesso nel tuo modello HTML.

<img src="button.png" ng-click="onButtonClick()"> 

3) Se la soluzione 2) essere diverso se ho intenzione di riutilizzare la direttiva altrove?

Se non prevede il riutilizzo; Probabilmente non userò una direttiva.

I have a Button and when clicked and dragged it should move a completely unrelated Element. 
Should I... 

    A) Create one directive and influence template & behavior based on a passed attribute? 
    B) Create two directives (one for the handle, one for the target Element) 
    If so, it again poses the question of where to put the methods to handle the dragging? 

Vorrei scegliere l'articolo A probabilmente; passare l'elemento che deve essere manipolato come argomento alla direttiva. Tuttavia, dipende da quanto mi interessa la riusabilità di questa funzionalità.

Tutto ciò che dico deve essere considerato soggettivo.

Answer 2

Prima di tutto, ottima domanda. Penso che ogni sviluppatore nuovo-angolare si scontri con le differenze con tutti i componenti forniti (controller, direttiva, servizio, filtro ecc.).

Cominciamo con la definizione formale di base:

direttive sono indicatori su un elemento DOM che raccontano compilatore HTML di AngularJS per collegare un comportamento specificato a quell'elemento DOM.

E d'altra parte

Controller è una funzione di costruzione JavaScript che viene utilizzato per aumentare la portata angolare

Il comportamento definito fa ci guida attraverso alcuni pollici regola-di- .

Così, per le vostre domande di cui sopra:

1. In parole semplici, si controllori all'utente di gestire un'area (scope) in Il template HTML con tutte le grandi capacità di un controller porta (a due vie -connessione, comportamento con scope, iniezioni di servizi, ecc.) E noi Utilizzare le direttive quando si desidera manipolare un elemento HTML esistente o personalizzato, nella maggior parte degli scenari, quando si pensa di riutilizzare gli elementi .
2. Ciò dipende dal contesto di ciò che dovrebbe fare ng-click. Diciamo che hai la tua direttiva personalizzata per un input numerico che ha un design e un comportamento personalizzati come hai definito nella tua configurazione direttiva. E tu lo usi in una forma che ng-clic supponga di far apparire una modale con valori opzionali e usarla in un posto diverso nell'applicazione e ng-clic farà qualcos'altro. In questo caso la funzione deve essere una portata. ma diciamo che sia la posizione che ogni altra cosa faranno esattamente lo stesso, questo prende la funzione nell'ambito della direttiva.
3. Risposte sopra :)
4. Ognuna delle tue opzioni andrà bene, questa dove "opinione" prende in mano e meno regole empiriche. perché? perché entrambi i modi funzioneranno quando ciascuno ha vantaggi e svantaggi. La regola empirica che posso trovare nello scenario è che se entrambi gli elementi fanno parte del modello di direttiva, mi aspetto che il "comportamento" (la funzione di trascinamento) faccia parte dell'ambito della direttiva.

Buona fortuna