单个页面中不同 <div> 中的多个 ng 控制器

Question

今天是第 2 天，我开始学习 angularJS。我认识了

在应用程序中，ng-app 对于所有应用程序都是相同的，或者它是应用程序的定义。
一个 ng-app 可以有超过 1 个 ng-controller。
根据控制器名称，我们可以将控件移至其实现。
一个应用程序可能有多个 div 标签，每个 div 可能有不同的控制器。

根据上面的理解，我写了下面的示例代码来测试：

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body  ng-app="expressions" >

<div ng-controller="NGExpressionController">

<h1>This is AngularJS Expression example.......</h1>

<p>On String expression...</p>
Name: <input ng-model="name" type="text"></input></br>
Your name is {{name}}

</div>


<div ng-controller="NGExpressionControllerTwo">

<h1>This is AngularJS Expression example.......</h1>

<p>On String expression...</p>
Name: <input ng-model="adddress" type="text"></input></br>
Your name is {{address}}

</div>

<script>

    angular.module('expressions', []).controller('NGExpressionController',function($scope){
        $scope.name="Test Name";
    });


</script>

<script>

    angular.module('expressions', []).controller('NGExpressionControllerTwo',function($scope){
    $scope.address="Kolkata";   
    });
</script>

</body>
</html>

但上面的代码显示以下错误：

https://docs.angularjs.org/error/ng/areq?p0=NGExpressionController&p1=not%20a%20function,%20got%20undefined

我哪里错了？是我的理解有误还是代码实现有误。。任何形式的帮助都会有很大的帮助。

Answer 1

首先你的代码有一些错误，由于错误地定义了模块，

    <script>
     angular.module('expressions',[])
      .controller('NGExpressionController',function($scope){
          $scope.name="Test Name";
      })
      .controller('NGExpressionControllerTwo',function($scope){
          $scope.address="Kolkata";   
      });
   </script>

创建应用程序时，您必须定义一次模块，定义模块后，您可以通过正确调用模块对象来使用该模块，用于创建模块使用

   angular.module('yourModuleName',[])

要再次使用该模块，请使用

 angular.module('yourModuleName')

不需要 [ ], 方块，它用于定义该模块的依赖关系，当放置它时将导致再次重新初始化模块，并且您将丢失以前定义的模块属性，

1 : ng-app 指令将初始化一个 angular 应用程序，它将对整个应用程序可用。无论如何，我们可以在单个应用程序中手动创建 (bootstrap) 个 angular 应用程序 link

2：一个 ng-app 可以有多个控制器，我们可以创建我们的控制器并根据需要将它们与任何 dom 元素绑定。

   <div ng-controller="NGExpressionController">
   {{name}}
     <div ng-controller="NGExpressionControllerTwo">
     {{address}}
     </div>
   </div>

3 ：基于定义的控制器，我们可以为相应的 dom 元素

操纵我们的逻辑或功能

4 ：显然是的，您也可以嵌套控制器以利用 $scope 继承。，一定要明智地使用它们...... 快乐编码...

Answer 2

你实施了两次（2 <script> 标签），这意味着他不会再认出第一个。

工作计划：https://plnkr.co/edit/eeFddCQSBg5Lm7SOyZH0?p=preview

<script>

angular.module('expressions', []).controller('NGExpressionController',function($scope){
    $scope.name="Test Name";
}).controller('NGExpressionControllerTwo',function($scope){
$scope.address="Kolkata";   
});

然而，使用 <script> 加载 controllers 从来都不是一个好习惯，但由于这只是你学习 Angular 的第二天，我就这样吧:) 不管怎样，你可以随时使用 https://www.codeschool.com/ 你会边做边学。

单个页面中不同 <div> 中的多个 ng 控制器

More than one ng controllers in different <div>s in a single page

angularjs

ng-controller