在单个AngularJS应用中使用两个控制器
[英]Using Two Controllers in a Single AngularJS App
问题描述
Full source code can be found http://plnkr.co/edit/rQSg5eMhm9uc9dSWnWEU?p=preview 
完整的源代码可以找到http://plnkr.co/edit/rQSg5eMhm9uc9dSWnWEU?p=preview
In the index.html file if I use only one controller at a time it works. 如果我一次仅使用一个控制器，则在index.html文件中。 That is if I use 那就是我用
<body>
<div id="inputExample" ng-app="AngularJSTestBedWebApp" ng-controller="AngularJSInputExampleController">
input example: <input type="text" ng-model="inputValue" /><br/>
This is the updated value: {{inputValue}}
</div>
</body>
or if I use 或者如果我使用
<body>
<div id="scopeExample" ng-app="AngularJSTestBedWebApp" ng-controller="AngularJSScopeExampleController">
{{understandingScope}}
</div>
</body>
It will also work. 它也将起作用。 However if I use both controllers at the same time such as 但是，如果我同时使用两个控制器，例如
<body>
<div id="scopeExample" ng-app="AngularJSTestBedWebApp" ng-controller="AngularJSScopeExampleController">
{{understandingScope}}
</div>
<div id="inputExample" ng-app="AngularJSTestBedWebApp" ng-controller="AngularJSInputExampleController">
input example: <input type="text" ng-model="inputValue" /><br/>
This is the updated value: {{inputValue}}
</div>
</body>
The second controller never gets used. 第二个控制器永远不会被使用。 {{inputValue}} never gets assigned a default value and also never updates when you type in the text box. {{inputValue}}永远不会分配默认值，也不会在您输入文本框时更新。 It literally just says "{{inputValue}}" the entire time. 从字面上讲，它始终是“ {{inputValue}}”。
I'm sure this is probably something easy but I'm very new to AngularJS. 我敢肯定这可能很容易，但是我对AngularJS还是很陌生。 Thanks in advance for any help. 在此先感谢您的帮助。
2 个解决方案
解决方案1
5 已采纳 2014-12-15 15:41:45
The ng-app attribute should be placed at the root of the application. ng-app属性应放在应用程序的根目录。 In your example that would be <body/> or <html/> 在您的示例中，该名称为<body/>或<html/>
<body ng-app="AngularJSTestBedWebApp">
<div id="scopeExample" ng-controller="AngularJSScopeExampleController">
{{understandingScope}}
</div>
<div id="inputExample" ng-controller="AngularJSInputExampleController">
input example: <input type="text" ng-model="inputValue" /><br/>
This is the updated value: {{inputValue}}
</div>
</body>
解决方案2
0 2016-05-16 09:10:56
Here a complete example of two applications in one html page and two conrollers in one application : 这里是一个html页面中两个应用程序和一个应用程序中两个控制器的完整示例：
<div ng-app = "myapp">
<div ng-controller = "C1" id="D1">
<h2>controller 1 in app 1 <span id="titre">{{s1.title}}</span> !</h2>
</div>
<div ng-controller = "C2" id="D2">
<h2>controller 2 in app 1 <span id="titre">{{s2.valeur}}</span> !</h2>
</div>
</div>
<script>
var A1 = angular.module("myapp", [])
A1.controller("C1", function($scope) {
$scope.s1 = {};
$scope.s1.title = "Titre 1";
});
A1.controller("C2", function($scope) {
$scope.s2 = {};
$scope.s2.valeur = "Valeur 2";
});
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.