Definicja sterownika AngularJS

Question

W dyrektywie AngularJS zrozumiałem, że istnieją 2 sposoby zdefiniowania kontrolera. Kontroler można zdefiniować jako część definicji dyrektywy przy użyciu opcji controller:. Alternatywnie, widok dyrektywy templateURL:'someview.html' może zawierać wymagany kontroler. Czy ktokolwiek może wyjaśnić, jakie są różnice między tymi dwiema opcjami i z których należy korzystać, kiedy?

w dyrektywie:

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

someview.html

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

</div> 

Answer 1

Jeżeli dyrektywa złamie bez kontrolera, a następnie dyrektywa powinna określić kontroler potrzebuje. Tworzy to relację jeden-do-jednego między dyrektywą a kontrolerem.

Załóżmy, że mamy dyrektywę "Booking", która wymaga "BookingController". Dla deweloperów jest zbędne, gdy chodzi o dyrektywę i kontroler, za każdym razem, gdy muszą korzystać z dyrektywy Booking. Dlatego dyrektywa może definiować controller: "BookingController", a AngularJS automatycznie tworzy instancję kontrolera, gdy używana jest dyrektywa.

Co zrobić, jeśli twoja dyrektywa jest ogólna? Masz dyrektywę, która obsługuje tylko formatowanie zamówienia Rezerwacja, ale istnieje wiele kontrolerów, które obsługują różne rodzaje rezerwacji. W takim przypadku dyrektywa nie zdefiniowałaby kontrolera. Zdefiniowałaby tylko to, czego potrzebuje "booking_number" w bieżącym zakresie. Deweloper musiałby "użyć" tej dyrektywy gdzieś w DOM "pod" kontrolerem, który zajmuje się rezerwacją.

Najlepiej myśleć o dyrektywach jako o kodzie, który publikuje bieżący zakres, ale nie manipuluje bieżącym zakresem. Kontrolery są kodami, które manipulują bieżącym zasięgiem, ale nie wiedzą, jak zakres jest publikowany. Widoki (lub HTML) to miejsce, w którym te dwie rzeczy są zgrupowane w kolejności zależności.

Answer 2

Jedną ważną różnicą w dostarczaniu klucza controller do dyrektywy jest to, że kontroler tej dyrektywy może być required innymi dyrektywami do użytku. Na przykład, o to fragment z dwóch dyrektyw na dnie 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

Upewnij się umieścić cytaty (" lub ') wokół nazwy kontrolera jeśli zdefiniowany kontroler poza dyrektywy lub inny pokaże błąd

Źle:

controller: MyController 

Poprawnie:

controller: 'MyController' 

To wielka różnica; w drugim przypadku kontroler zostanie wstrzyknięty w Bootstrap.