Question

我是AngularJS的新手，遗憾的是我的代码不起作用。我想要三个下拉字段，但我只能做一个。如果我使用下面的代码，只有第一个下拉列表有效;第二个和第三个是空的。

我担心这是因为我不知道的AngularJS，或者我忘了......

我已经用谷歌搜索了这个东西，但我找不到任何可以帮助我的东西。我尝试了很多不同的方法但没有任何作用。

这是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>

这是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>

Answer 1

Angularjs将仅引导第一次出现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"];
});

工作人员 http://plnkr.co/edit/Rovgs3Ets6oNtrFlu9hi?p=preview

Answer 2

来自angular docs：

每个HTML文档只能自动引导一个AngularJS应用程序。在文档中找到的第一个ngApp将用于定义作为应用程序自动引导的根元素。要在HTML文档中运行多个应用程序，必须使用angular.bootstrap手动引导它们。

您可以在同一模块中拥有多个控制器，并且可以在多个模块中拥有多个控制器。

AngularJS不适用于多个控制器

2 个答案: