Jestem nowy w Angular i próbuję wymyślić, jak to zrobić ...
Korzystając z AngularJS, w jaki sposób mogę wstrzyknąć kontroler do użycia w innym kontrolerze?
Mam następujący fragment:
var app = angular.module("testApp", ['']);
app.controller('TestCtrl1', ['$scope', function ($scope) {
$scope.myMethod = function () {
console.log("TestCtrl1 - myMethod");
}
}]);
app.controller('TestCtrl2', ['$scope', 'TestCtrl1', function ($scope, TestCtrl1) {
TestCtrl1.myMethod();
}]);
Kiedy to wykonuję, pojawia się błąd:
Error: [$injector:unpr] Unknown provider: TestCtrl1Provider <- TestCtrl1
http://errors.angularjs.org/1.2.21/$injector/unpr?p0=TestCtrl1Provider%20%3C-%20TestCtrl1
Czy powinienem nawet próbować użyć kontrolera w innym kontrolerze, czy powinienem uczynić to usługą?
TestCtrl1
zamiast tego powinieneś zmienić się w usługę.Odpowiedzi:
Jeśli Twoim zamiarem jest zdobycie już utworzonego kontrolera innego komponentu i jeśli stosujesz podejście oparte na komponencie / dyrektywie, zawsze możesz
require
mieć kontroler (instancję komponentu) z innego komponentu, który jest zgodny z określoną hierarchią.Na przykład:
Teraz użycie powyższych komponentów może wyglądać mniej więcej tak:
Wymaganie można skonfigurować na wiele sposobów .
Stara odpowiedź:
Musisz wstrzyknąć
$controller
usługę, aby utworzyć wystąpienie kontrolera wewnątrz innego kontrolera. Należy jednak pamiętać, że może to prowadzić do problemów projektowych. Zawsze możesz utworzyć usługi wielokrotnego użytku, które są zgodne z Single Responsibility i wstrzyknąć je do kontrolerów, gdy potrzebujesz.Przykład:
W każdym razie nie można wywołać,
TestCtrl1.myMethod()
ponieważ metoda została dołączona do$scope
instancji kontrolera, a nie do.Jeśli udostępniasz kontroler, zawsze lepiej byłoby zrobić: -
i podczas konsumpcji:
W pierwszym przypadku jest
$scope
to twój model widoku, aw drugim jest to sama instancja kontrolera.źródło
var testCtrl1ViewModel = $scope.$new();
byćvar testCtrl1ViewModel = $rootScope.$new();
? zobacz: docs.angularjs.org/guide/controller @PSLSugerowałbym pytanie, które powinieneś zadać, to jak wstrzyknąć usługi do kontrolerów. Grube usługi z chudymi kontrolerami to dobra zasada, czyli po prostu użyj kontrolerów, aby przykleić usługę / fabrykę (z logiką biznesową) do swoich widoków.
Kontrolery zbierają elementy bezużyteczne przy zmianach tras, więc na przykład, jeśli używasz kontrolerów do przechowywania logiki biznesowej, która renderuje wartość, utracisz stan dwóch stron, jeśli użytkownik aplikacji kliknie przycisk Wstecz przeglądarki.
Oto działające demo fabryczne wstrzyknięte do dwóch kontrolerów
Sugerowałbym również przeczytanie tego samouczka na temat usług / fabryk.
źródło
Nie ma potrzeby importowania / wstrzykiwania kontrolera w JS. Możesz po prostu wstrzyknąć swój kontroler / zagnieżdżony kontroler za pośrednictwem kodu HTML. Lubić :
źródło
Działa to najlepiej w moim przypadku, gdzie TestCtrl2 ma swoje własne dyrektywy.
To daje mi błąd z informacją o błędzie wstrzyknięcia scopeProvider.
To tak naprawdę nie działa, jeśli masz dyrektywy w 'TestCtrl1', ta dyrektywa w rzeczywistości ma inny zakres niż ta utworzona tutaj. Kończysz z dwoma wystąpieniami „TestCtrl1”.
źródło
Najlepszym rozwiązaniem:-
// Tutaj otrzymałeś pierwsze wywołanie kontrolera bez jego wykonywania
źródło
możesz również użyć
$rootScope
do wywołania funkcji / metody pierwszego kontrolera z drugiego kontrolera w ten sposób,źródło
używaj maszynopisu do kodowania, ponieważ jest on zorientowany obiektowo, ściśle wpisany na maszynie i łatwy w utrzymaniu kodu ...
aby uzyskać więcej informacji o typach kliknij tutaj
Oto jeden prosty przykład, który utworzyłem, aby udostępniać dane między dwoma kontrolerami za pomocą Typescript ...
}
źródło