Question

可以找到完整的源代码http://plnkr.co/edit/rQSg5eMhm9uc9dSWnWEU?p=preview

在index.html文件中，如果我一次只使用一个控制器，它就可以工作。那就是我使用

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

或者如果我使用

<body>
    <div id="scopeExample" ng-app="AngularJSTestBedWebApp" ng-controller="AngularJSScopeExampleController">
        {{understandingScope}}
    </div> 
</body>

它也会起作用。但是，如果我同时使用两个控制器，如

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

第二个控制器永远不会被使用。永远不会为{{inputValue}}分配默认值，也不会在文本框中输入时更新。它实际上只是说＆＃34; {{inputValue}}＆＃34;整个时间。

我确信这可能很容易，但我对AngularJS来说还是一个新手。提前感谢您的帮助。

Answer 1

ng-app属性应放在应用程序的根目录下。在您的示例中，<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>

Updated plnkr

Answer 2

这里是一个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>

在单个AngularJS应用程序中使用两个控制器

2 个答案: