AngularJS不适用于多个控制器
[英]AngularJS doesn't work with multiple controllers
问题描述
I am new to AngularJS and my code unfortunately doesn't work. 
我是AngularJS的新手，但是不幸的是我的代码无法正常工作。 I want three dropdown fields, but I can only do one. 我想要三个下拉字段，但我只能做一个。 If I use the code as you see below, only the first dropdown works; 如果我使用下面的代码，则只有第一个下拉列表有效； the second and third are empty. 第二个和第三个为空。
I have the apprehension that it is because of AngularJS which I don't know, or I forgot... 我担心这是因为我不知道是因为AngularJS，还是我忘记了...
I already googled this thing, but I didn't find anything that could help me. 我已经用谷歌搜索了这个东西，但是没有找到任何可以帮助我的东西。 I have tried a lot of different ways but nothing works. 我尝试了很多不同的方法，但是没有任何效果。
This is the html: 这是html：
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
//products
<div ng-app="product-selection" ng-controller="product-controller">
<select ng-model="choosenProduct" ng-options="x for x in products"></select>
<div ng-bind = "choosenProduct"></div>
</div>
//formats
<div ng-app="format-selection" ng-controller="format-controller">
<select ng-model="choosenFormat" ng-options="x for x in formats"></select>
</div>
//weights
<div ng-app="weight-selection" ng-controller="weight-controller">
<select ng-model="choosenWeight" ng-options="x for x in weights"></select>
</div>
</body>
</html>
And this is the JS: 这就是JS：
<script>
var product = angular.module('product-selection',[]);
var weight = angular.module('weight-selection',[]);
var format = angular.module('format-selection',[]);
//products
product.controller('product-controller', function($scope){
$scope.products = ["Brief", "Postkarte", "Infopost", "Büchersendung", "Warensendung", "PZA" ,"Päckchen", "Blindensendung"];
});
//formats
format.controller('format-controller', function($scope){
$scope.formats = ["Standard", "Kompakt", "Groß", "Maxi", "Maxi bis 2kg"];
});
//weights
weight.controller('weight-controller', function($scope){
$scope.weights = ["0-50g", "51-100g", "101-200g", "201-300g"];
});
</script>
2 个解决方案
解决方案1
4 已采纳 2016-02-26 16:13:52
Angularjs will bootstrap only the first occurrence of ng-app , you could bootstrap manually the other two, but multiple apps are most likely to bring you a lot of problems especially with sharing data between controllers and might be a source of duplicated code (formatters, some small common parts) if you want to separate some logic by modules you can do it and inject all of the specific modules into one module ie Angularjs仅会引导第一次出现的ng-app ，您可以手动引导另外两个ng-app ，但是多个应用最有可能给您带来很多问题，尤其是在控制器之间共享数据时，并且可能是重复代码的来源（格式化程序，一些小的公共部分）如果您想按模块分离一些逻辑，则可以将所有特定模块注入一个模块，即
var app = angular.module('app',['product-selection', 'weight-selection', 'format-selection']);
var product = angular.module('product-selection',[]);
var weight = angular.module('weight-selection',[]);
var format = angular.module('format-selection',[]);
//products
product.controller('product-controller', function($scope){
$scope.products = ["Brief", "Postkarte", "Infopost", "Büchersendung", "Warensendung", "PZA" ,"Päckchen", "Blindensendung"];
});
//formats
format.controller('format-controller', function($scope){
console.log('format')
$scope.formats = ["Standard", "Kompakt", "Groß", "Maxi", "Maxi bis 2kg"];
});
//weights
weight.controller('weight-controller', function($scope){
console.log('weight')
$scope.weights = ["0-50g", "51-100g", "101-200g", "201-300g"];
});
working plunker http://plnkr.co/edit/Rovgs3Ets6oNtrFlu9hi?p=preview 工作中的矮人http://plnkr.co/edit/Rovgs3Ets6oNtrFlu9hi?p=preview
解决方案2
1 2016-02-26 16:10:59
From angular docs : 从角度文档 ：
Only one AngularJS application can be auto-bootstrapped per HTML document.
You can have multiple controllers in the same module and multiple modules having multiple controllers. 同一模块中可以有多个控制器，而多个模块中可以有多个控制器。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.