L'utilizzo di più controller definiti tramite modulo non funziona

Quando si definiscono i controller come funzioni globali, tutto funziona correttamente. Ma quando si usano i moduli per dichiarare e "assegnare" i controller, solo il primo controller viene utilizzato per risolvere i binding. Cosa mi manca?L'utilizzo di più controller definiti tramite modulo non funziona

<!doctype html> 
<html> 
<head/> 
<body> 
    <div ng-app="flintstones"> 
    <div ng-controller="flintstoneCtrl"> 
     <label>Name:</label> 
     <input type="text" ng-model="yourName" placeholder="Enter a name here"> 
     <hr> 
     <h1>Hello {{yourName}}!</h1> 
    </div> 
    </div> 
    <div ng-app="rumbles"> 
    <div ng-controller="rumbleCtrl"> 
     <label>Name:</label> 
     <input type="text" ng-model="yourName" placeholder="Enter a name here"> 
     <hr> 
     <h1>Hello {{yourName}}!</h1> 
    </div> 
    </div> 
</body> 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> 
<script> 

    var flintstones = angular.module("flintstones", []); 
    flintstones.controller("flintstoneCtrl", function flintstoneCtrl($scope) { 
    $scope.yourName = "Fred"; 
    }); 

    var rumbles = angular.module("rumbles", []); 
    rumbles.controller("rumbleCtrl", function rumbleCtrl($scope) { 
    $scope.yourName = "Barney"; 
    }); 

</script> 

</html>

fonte

2013-04-18 Florian Salihovic

credo, una pagina può avere un solo 'ng-app' nel tuo caso si hanno due' definizioni NG-app', se si dispone di più applicazioni in una pagina devi fare manuale di avvio automatico –

credo, una pagina può avere un solo ng-app come predefinito, nel tuo caso si hanno due ng-app definizioni.

If you have multiple apps in a page you have to do manual bootstrapping

fonte

2013-04-18 10:14:16

Grazie, quello era il puntatore giusto. –

@Arun è corretto. Tuttavia, nel tuo caso, suppongo che tu non voglia davvero eseguire il bootstrap di Angular due volte, ma semplicemente utilizzare controller definiti in moduli diversi.

Questo di solito è fatto avendo un modulo pagina/sito che ha dipendenze su tutti i moduli richiesti, nel tuo caso flintstones e rumbles.

angular.module('flintstones', []).controller('flintstoneCtrl', ...); 
angular.module('rumbles', []).controller('rumbleCtrl', ...); 

// Create a module with dependencies. 
angular.module('myApp', ['flintstones', 'rumbles'])...

nel codice HTML, è quindi sufficiente utilizzare ng-app="myApp" e contenuti da quel modulo e tutte le sue dipendenze saranno accessibili.

<html ng-app="myApp"> 
    <body> 
    <div ng-controller="flintstoneCtrl">...</div> 
    <div ng-controller="rumbleCtrl">...</div> 
    </body> 
</html>

fonte

2013-04-18 12:34:36 Martin

Grazie per l'aggiunta. Ma in realtà ho davvero bisogno di riavviare manualmente ogni modulo, dal momento che non posso sapere quale componente è utilizzato in fase di runtime. È per un progetto WCMS abbastanza grande e in alcune pagine/contesti conosco il set di componenti (dove sceglierei il tuo approccio), in alcune pagine/contesti che non funzionano, quindi devo davvero eseguire il bootstrap di tutto a mano. –

L'utilizzo di più controller definiti tramite modulo non funziona

risposta

Problemi correlati