AngularJS 在 1 个应用程序中声明多个控制器

AngularJS Declaring Multiple Controllers in 1 app

本文关键字：声明 控制器 应用程序 AngularJS      更新时间：2023-09-26

我在 1 个应用程序中声明 2 个控制器时遇到问题。 我的猜测是这是一个语法错误，但不完全确定。

我收到的错误消息是"未定义人员"。

这是我的应用文件

var myApp = angular.module('myApp',[]);

 myApp.config(function($interpolateProvider) {
 $interpolateProvider.startSymbol('{[{');
 $interpolateProvider.endSymbol('}]}');
 });

   myApp.controller('controller1', function($scope) {
   var pets = [
   {animal: "dog", years: "3 Years"},
   {animal: "dog", years: "1 Years"},
   ];});

   myApp.controller('controller2', function($scope) {

   var people = [
   {name: "john", bday: "september"},
   {name: "nancy",bday: "december"},
   ];
   });

在我的html页面上，我只是编写了一些试图获取人员数组长度的javascript。

  var totalpeople = people.length;

注意：不确定这是否是重要信息，但我在 html 标记中声明了我的应用。

更新：这是我的HTML页面上的一些基本伪代码。

    <html ng-app="myApp">
    <head>
    <script>
    var totalpeople = people.length;
    </script>
    </head>
    <body>
    <div ng-controler="controller1">
    <table><tr ng-repeat="rows in pets">
    <td>{[{pets.animal}]}</td><td>{[{pets.year}]}</td>
    </tr>
    </div>
    <div ng-controler="controller2">
    <table><tr ng-repeat="rows in people">
    <td>{[{pets.name}]}</td><td>{[{pets.bday}]}</td>
    </tr>
    </div>
    <div>
    <table><tr>
    <td><script>//not actually doing this, but totalpeople goes here </script></td>
    </tr>
    </div>
    </body>

html 和脚本部分都有很多错误。就像你把ng-controller误写成ng-controler一样。而且，ng-repeat逻辑都是错误的。您缺少表标记等。我不知道你为什么要插值{{}}来使用{[{}]}。

这是工作弹道机：http://plnkr.co/edit/qs7mCrmElXGqGHdKAmNH?p=preview

    <html>
        <head>
          <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
        </head>
        <body ng-app="myApp">
        <div ng-controller="controller1">
            <table><tr ng-repeat="rows in pets">
            <td>{[{rows.animal}]}</td><td>{[{rows.years}]}</td>
                </tr>
                </table>
              Total pets:{[{count}]}
        </div>
        <div ng-controller="controller2">
        <table><tr ng-repeat="rows in people">
        <td>{[{rows.name}]}</td><td>{[{rows.bday}]}</td>
        </tr>
        </table>
        </div>
         <br>
                  Total Pets:
                 <span id="show"></span>
    <script>
    var myApp = angular.module('myApp',[]);

     myApp.config(function($interpolateProvider) {
     $interpolateProvider.startSymbol('{[{');
     $interpolateProvider.endSymbol('}]}');
     });

       myApp.controller('controller1', function($scope) {
       $scope.pets = [
       {animal: "dog", years: "3 Years"},
       {animal: "dog", years: "1 Years"}
       ];
       $scope.count = $scope.pets.length;
       document.getElementById('show').innerText=$scope.count;//use directive to achieve this,using jquery inside controller is bad practise. Used just for the purpose of demo.
});

       myApp.controller('controller2', function($scope) {
       $scope.people = [
       {name: "john", bday: "september"},
       {name: "nancy",bday: "december"},
       ];
       });
    </script>
        </body>
      </html>

在我的 html 页面上，我只是在编写一些试图 获取人员数组的长度。

您确定您希望people在全局范围内可用（即window对象的属性）吗？

现在让我们简化代码，如下所示：

function doStuff() {
   var people = "whatever";
}
doStuff();
// Is "people" variable available?

答案是否定的，它不可用，因为它是一个doStuff函数局部变量。

这不是一个特定于 Angular 的问题，但它是变量范围在 JavaScript 中的工作方式（实际上在任何语言中）。

实际上，Angular 试图避免向全局范围添加垃圾，您需要使用内置的数据绑定来显示 UI 中的值。

为什么你需要在你的视图中编写javascript来获得长度？ 

   $scope.people = [
      {name: "john", bday: "september"},
      {name: "nancy",bday: "december"},
   ];

然后可以只做人.长度在你的观点。

不过，查看您尝试调用它的上下文会有所帮助。

相关文章：