Źródło
Różnica między tworzeniem kontrolera przy użyciu $scope object
i przy użyciu “controller as”
składni i maszyny wirtualnej
Tworzenie kontrolera przy użyciu obiektu $ scope
Zwykle tworzymy kontroler za pomocą obiektu $ scope, jak pokazano na poniższym liście:
myApp.controller("AddController", function ($scope) {
$scope.number1;
$scope.number2;
$scope.result;
$scope.add = function () {
$scope.result = $scope.number1 + $scope.number2;
}
});
Powyżej tworzymy AddController z trzema zmiennymi i jednym zachowaniem, używając kontrolera obiektu $ scope i widoku, które komunikują się ze sobą. Obiekt $ scope służy do przekazywania danych i zachowania do widoku. Skleja ze sobą widok i kontroler.
Zasadniczo obiekt $ scope wykonuje następujące zadania:
Przekaż dane z kontrolera do widoku
Przekaż zachowanie z kontrolera do widoku
Skleja kontroler i widok razem
Obiekt $ scope zostaje zmodyfikowany, gdy zmienia się widok, a widok zostaje zmodyfikowany, gdy właściwości obiektu $ scope ulegają zmianie
Dołączamy właściwości do obiektu $ scope, aby przekazać dane i zachowanie do widoku. Przed użyciem obiektu $ scope w kontrolerze, musimy przekazać go w funkcji kontrolera jako zależności.
Używanie składni „kontroler jako” i maszyny wirtualnej
Możemy przepisać powyższy kontroler, używając kontrolera jako składni i zmiennej vm, jak pokazano na poniższej liście:
myApp.controller("AddVMController", function () {
var vm = this;
vm.number1 = undefined;
vm.number2=undefined;
vm.result =undefined;
vm.add = function () {
vm.result = vm.number1 + vm.number2;
}
});
Zasadniczo przypisujemy to do zmiennej vm, a następnie dołączamy do niej właściwość i zachowanie. W widoku możemy uzyskać dostęp do AddVmController używając kontrolera jako składni. Jest to pokazane na poniższej liście:
<div ng-controller="AddVMController as vm">
<input ng-model="vm.number1" type="number" />
<input ng-model="vm.number2" type="number" />
<button class="btn btn-default" ng-click="vm.add()">Add</button>
<h3>{{vm.result}}</h3>
</div>
Oczywiście możemy użyć innej nazwy niż „vm” w kontrolerze jako składni. Pod maską AngularJS tworzy obiekt $ scope i dołącza właściwości oraz zachowanie. Jednak używając kontrolera jako składni, kod jest bardzo czysty na kontrolerze i tylko nazwa aliasu jest widoczna w widoku.
Oto kilka kroków, aby użyć kontrolera jako składni:
Utwórz kontroler bez obiektu $ scope.
Przypisz to do zmiennej lokalnej. Wolałem nazwę zmiennej jako vm, możesz wybrać dowolną nazwę.
Dołącz dane i zachowanie do zmiennej maszyny wirtualnej.
W widoku podaj alias kontrolerowi, używając kontrolera jako składni.
Możesz nadać aliasowi dowolną nazwę. Wolę używać maszyny wirtualnej, chyba że nie pracuję z zagnieżdżonymi kontrolerami.
Przy tworzeniu kontrolera nie ma bezpośrednich zalet ani wad używania podejścia obiektowego $ scope lub kontrolera jako składni. Jest to jednak kwestia wyboru, jednak użycie kontrolera jako składni sprawia, że kod JavaScript kontrolera jest bardziej czytelny i zapobiega wszelkim problemom związanym z tym kontekstem.
Zagnieżdżone kontrolery w podejściu obiektowym $ scope
Mamy dwa kontrolery, jak pokazano na poniższej liście:
myApp.controller("ParentController", function ($scope) {
$scope.name = "DJ";
$scope.age = 32;
});
myApp.controller("ChildController", function ($scope) {
$scope.age = 22;
$scope.country = "India";
});
Właściwość „age” znajduje się wewnątrz obu kontrolerów i w widoku te dwa kontrolery można zagnieżdżać, jak pokazano na poniższej liście:
<div ng-controller="ParentController">
<h2>Name :{{name}} </h2>
<h3>Age:{{age}}</h3>
<div ng-controller="ChildController">
<h2>Parent Name :{{name}} </h2>
<h3>Parent Age:{{$parent.age}}</h3>
<h3>Child Age:{{age}}</h3>
<h3>Country:{{country}}</h3>
</div>
</div>
Jak widać, aby uzyskać dostęp do właściwości wieku kontrolera nadrzędnego, używamy zmiennej $ parent.age. Separacja kontekstu nie jest tutaj zbyt jasna. Ale używając kontrolera jako składni, możemy pracować z zagnieżdżonymi kontrolerami w bardziej elegancki sposób. Powiedzmy, że mamy kontrolery, jak pokazano na poniższej liście:
myApp.controller("ParentVMController", function () {
var vm = this;
vm.name = "DJ";
vm.age = 32;
});
myApp.controller("ChildVMController", function () {
var vm = this;
vm.age = 22;
vm.country = "India";
});
W widoku te dwa kontrolery można zagnieżdżać, jak pokazano na poniższej liście:
<div ng-controller="ParentVMController as parent">
<h2>Name :{{parent.name}} </h2>
<h3>Age:{{parent.age}}</h3>
<div ng-controller="ChildVMController as child">
<h2>Parent Name :{{parent.name}} </h2>
<h3>Parent Age:{{parent.age}}</h3>
<h3>Child Age:{{child.age}}</h3>
<h3>Country:{{child.country}}</h3>
</div>
</div>
W kontrolerze jako składni mamy bardziej czytelny kod, a do właściwości nadrzędnej można uzyskać dostęp za pomocą nazwy aliasu kontrolera nadrzędnego zamiast używania składni $ parent.
Zakończę ten post stwierdzeniem, że wybór należy wyłącznie do Ciebie, czy chcesz użyć kontrolera jako składni, czy obiektu $ scope. Nie ma to żadnej wielkiej zalety ani wady, po prostu kontroler jako składnia, którą masz kontrolę nad kontekstem, jest nieco łatwiejszy w użyciu, biorąc pod uwagę wyraźną separację w zagnieżdżonych kontrolerach w widoku.
controller as
to naprawia).