Direttiva AngularJS Definizione controller

Question

Nella direttiva AngularJS ho capito che esistono 2 modi per definire il controller. Il controller può essere definito come parte della definizione della direttiva utilizzando l'opzione controller:. In alternativa, la vista della direttiva templateURL:'someview.html' può contenere il controller richiesto. Qualcuno può spiegare quali sono le differenze tra queste 2 opzioni e quale usare quando?

entro direttiva:

app.directive('myDirective', function() { 
    templateUrl: 'someview.html, 
    controller: 'MyController' ----> either here 
}); 

someview.html

<div ng-contoller='my-controller'> ----> or here 

</div> 

Answer 1

Se la direttiva si romperà senza il controller, quindi la direttiva dovrebbe definire il controller di cui ha bisogno. Ciò crea un'associazione one-to-one tra la direttiva e il controller.

Supponiamo di avere una direttiva "Booking" che necessita di "BookingController". È ridondante per lo sviluppatore specificare sia la direttiva che il controller ogni volta che è necessario utilizzare la direttiva di prenotazione. Quindi la direttiva può definire controller: "BookingController" e AngularJS crea automaticamente un'istanza di quel controller quando viene utilizzata la direttiva.

Cosa succede se la vostra direttiva è generica? Hai una direttiva che gestisce solo la formattazione dell'ordine di prenotazione, ma ci sono molti controllori che gestiscono diversi tipi di prenotazioni. In questo caso, la direttiva non definirebbe il controller. Definirebbe solo ciò di cui ha bisogno "booking_number" nell'ambito corrente. Lo sviluppatore dovrebbe "usare" quella direttiva da qualche parte nel DOM "sotto" un controller che gestisce la prenotazione.

È meglio pensare alle direttive come codice che pubblica l'ambito corrente, ma non manipolare l'ambito corrente. I controller sono codici che manipolano l'ambito corrente, ma non sanno come viene pubblicato l'ambito. Views (o HTML) è dove queste due cose sono scattate insieme in ordine di dipendenze.

Answer 2

Una differenza importante nel fornire una chiave controller ad una direttiva è che il controller per tale direttiva può essere require d da altre direttive per l'uso. Ad esempio, ecco un frammento di due direttive sul fondo del the AngularJS homepage:

app.directive('tabs', function() { 
    return { 
    // ... 

    controller: function($scope, $element) { 
     this.addPane = function() { 
     // ... 
     }; 
    }, 

    // ... 
    }; 
}); 

app.directive('tab', function() { 
    return { 
    // ... 

    // require the controller from the `tabs` directive 
    // on a parent element 
    require '^tabs', 

    // required controller passed as fourth parameter 
    link: function(scope, elem, attrs, tabsController) { 
     tabsController.addPane(...); 
    } 
    }; 
}); 

<tabs> 
    <tab>...</tab> 
    <tab>...</tab> 
</tabs> 

Answer 3

assicuratevi di mettere le virgolette (" o ') attorno al nome del controller se si è definito il controller esterno direttiva oppure mostrerà errore

sbagliato:

controller: MyController 

corretta:

controller: 'MyController' 

Fa una grande differenza; nel secondo caso, il controller verrà iniettato in Bootstrap.