Używanie wielu kontrolerów zdefiniowanych przez moduł nie działa

Podczas definiowania kontrolerów jako funkcji globalnych wszystko działa poprawnie. Ale podczas używania modułów do deklarowania i "przypisywania" kontrolerów, tylko pierwszy kontroler jest używany do rozstrzygnięcia powiązań. Czego mi brakuje?Używanie wielu kontrolerów zdefiniowanych przez moduł nie działa

<!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>

Źródło

2013-04-18 Florian Salihovic

myślę, że jedna strona może mieć tylko jeden 'NG-app' w twoim przypadku masz dwa' definicje NG-app', jeśli masz wiele aplikacji na stronie trzeba zrobić instrukcja uruchamiających –

myślę, że jedna strona może mieć tylko jeden ng-app jako domyślny, w twoim przypadku masz dwie ng-app definicje.

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

Źródło

2013-04-18 10:14:16

Dzięki, to był właściwy wskaźnik. –

@Arun jest poprawna. Jednak w twoim przypadku domyślam się, że nie chcesz dwa razy ładować programu Angular, ale po prostu użyj kontrolerów zdefiniowanych w różnych modułach.

Zwykle robi się to przez posiadanie modułu strony/witryny, który ma zależności od wszystkich wymaganych modułów, w twoim przypadku flintstones i rumbles.

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

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

w HTML, następnie wystarczy użyć ng-app="myApp" i treści z tego modułu i wszystkich jego zależności będą dostępne.

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

Źródło

2013-04-18 12:34:36 Martin

Dzięki za dodanie. Ale tak naprawdę naprawdę muszę ręcznie załadować każdy moduł, ponieważ nie wiem, który komponent jest używany w środowisku wykonawczym. Jest to całkiem spory projekt WCMS i na niektórych stronach/kontekstach, znam zestaw komponentów (gdzie wybrałbym twoje podejście), w niektórych stronach/kontekstach, które nie działają, więc naprawdę muszę załadować wszystko ręcznie. –

Używanie wielu kontrolerów zdefiniowanych przez moduł nie działa

Odpowiedz

Powiązane problemy