Se la tua intenzione è di entrare in possesso di un controller già istanziato di un altro componente e se stai seguendo un approccio basato su componenti / direttive, puoi sempre require
un controller (istanza di un componente) da un altro componente che segue una certa gerarchia.
Per esempio:
//some container component that provides a wizard and transcludes the page components displayed in a wizard
myModule.component('wizardContainer', {
...,
controller : function WizardController() {
this.disableNext = function() {
//disable next step... some implementation to disable the next button hosted by the wizard
}
},
...
});
//some child component
myModule.component('onboardingStep', {
...,
controller : function OnboadingStepController(){
this.$onInit = function() {
//.... you can access this.container.disableNext() function
}
this.onChange = function(val) {
//..say some value has been changed and it is not valid i do not want wizard to enable next button so i call container's disable method i.e
if(notIsValid(val)){
this.container.disableNext();
}
}
},
...,
require : {
container: '^^wizardContainer' //Require a wizard component's controller which exist in its parent hierarchy.
},
...
});
Ora l'utilizzo di questi componenti di cui sopra potrebbe essere qualcosa del genere:
<wizard-container ....>
<!--some stuff-->
...
<!-- some where there is this page that displays initial step via child component -->
<on-boarding-step ...>
<!--- some stuff-->
</on-boarding-step>
...
<!--some stuff-->
</wizard-container>
Ci sono molti modi in cui puoi configurare require .
(nessun prefisso) - Individua il controller richiesto sull'elemento corrente. Genera un errore se non viene trovato.
? - Tentare di individuare il controller richiesto o di passare null al collegamento fn se non trovato.
^ - Individua il controller richiesto cercando l'elemento e i suoi genitori. Genera un errore se non viene trovato.
^^ - Individua il controller richiesto cercando i genitori dell'elemento. Genera un errore se non viene trovato.
? ^ - Tenta di individuare il controller richiesto cercando l'elemento e i suoi genitori o passa null al collegamento fn se non trovato.
? ^^ - Tenta di individuare il controller richiesto cercando i genitori dell'elemento o passa null al collegamento fn se non trovato.
Vecchia risposta:
È necessario iniettare il $controller
servizio per creare un'istanza di un controller all'interno di un altro controller. Ma tieni presente che questo potrebbe portare ad alcuni problemi di progettazione. Puoi sempre creare servizi riutilizzabili che seguono la Responsabilità Unica e iniettarli nei controller quando necessario.
Esempio:
app.controller('TestCtrl2', ['$scope', '$controller', function ($scope, $controller) {
var testCtrl1ViewModel = $scope.$new(); //You need to supply a scope while instantiating.
//Provide the scope, you can also do $scope.$new(true) in order to create an isolated scope.
//In this case it is the child scope of this scope.
$controller('TestCtrl1',{$scope : testCtrl1ViewModel });
testCtrl1ViewModel.myMethod(); //And call the method on the newScope.
}]);
In ogni caso non puoi chiamare TestCtrl1.myMethod()
perché hai allegato il metodo sull'istanza del controller $scope
e non sull'istanza.
Se condividi il controller, sarebbe sempre meglio fare: -
.controller('TestCtrl1', ['$log', function ($log) {
this.myMethod = function () {
$log.debug("TestCtrl1 - myMethod");
}
}]);
e mentre consumi fai:
.controller('TestCtrl2', ['$scope', '$controller', function ($scope, $controller) {
var testCtrl1ViewModel = $controller('TestCtrl1');
testCtrl1ViewModel.myMethod();
}]);
Nel primo caso è realmente il $scope
tuo modello di visualizzazione e nel secondo caso è l'istanza del controller stessa.
TestCtrl1
in un servizio.