二维数组在 Angular JS 1.2.x 中工作，而不是在 1.3.x 中答案

【问题标题】：2D arrays working in Angular JS 1.2.x and not in 1.3.x二维数组在 Angular JS 1.2.x 中工作，而不是在 1.3.x 中
【发布时间】：2015-03-23 13:07:03
【问题描述】：

我想在 Angular 中为 2D 数组编写一个简单的循环，如下所示：

<!DOCTYPE html>
<html ng-app="">
  <head>
    <meta charset="ISO-8859-1">
    <title>Angular 2D Demo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
    <script type="text/javascript">
      var TableCtrl = function($scope) {
        $scope.data = [
          ["val-11", "val-12", "val-13"],
          ["val-21", "val-22", "val-23"]
        ];
      }
    </script>
  </head>
  <body>
    <table ng-controller="TableCtrl">
      <tr ng-repeat="row in data">
        <td ng-repeat="col in row">{{col}}</td>
      </tr>
    </table>
  </body>
</html>

这段代码运行良好。

但是，如果使用的 angular 版本更改为 1.3.x，我的浏览器调试控制台上会出现以下错误：

Error: [ng:areq] http://errors.angularjs.org/1.3.14/ng/areq?p0=TableCtrl&p1=not%20a%20function%2C%20got%20undefined
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:6:417
    at Sb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:19:510)
    at tb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:20:78)
    at $get (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:75:331)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:57:65
    at s (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:7:408)
    at A (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:56:443)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:51:299)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:51:316)

我需要更改数据声明的语法还是需要更改其他内容？

【问题讨论】：

不是二维数组不起作用 - 它是一个全局控制器功能。这在 1.3 中是不允许的。您需要使用.controller("TableCtrl", function TableCtrl($scope){...}) 显式注册控制器。此外，如果你使用非缩小的 Angular，它会给你更多的描述性错误消息。
@RGraham，作为答案发布

标签： javascript arrays angularjs multidimensional-array angularjs-ng-repeat

【解决方案1】：

不是二维数组不工作 - 它是一个全局控制器功能。这在 1.3 中是不允许的（默认情况下）。你需要显式注册一个.controller：

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

app.controller("TableCtrl", function TableCtrl($scope){
  // whatever you currently have
});

您还需要明确说明应用名称：

<html ng-app="myApp">
   ...
</html>

（另外，如果你使用非缩小的 Angular，它会给你更多描述性的错误消息。）

【讨论】：

或打开错误的url也会以漂亮的形式呈现错误:)
@Mukund，您可以覆盖此设置，但我建议不要这样做。 Angular 团队放弃全局函数是有原因的——它助长了在全局范围内定义对象的不良做法。
@NewDev 我同意。作为一名 Java 开发人员，我理解将对象保存在全局范围内而不是在数据更安全、应用程序更可靠和可维护的受限模块化范围内的缺陷
@A.B，是的，但我见过一些实例（现在不记得到底是什么），与带有 url 编码消息的 url 相比，未缩小的 url 更冗长

【解决方案2】：

按照@NewDev 的建议，在模块上定义控制器。

或

在配置阶段对$controllerProvider 执行allowGlobals。

Angular Changelog

angular.module('myModule').config(['$controllerProvider', function($controllerProvider) {
  // this option might be handy for migrating old apps, but please don't use it
  // in new ones!
  $controllerProvider.allowGlobals();
}]);

【讨论】：

【解决方案3】：

错误是关于未定义的控制器。您需要使用 .controller() 来声明控制器，因为您使用的是 Angular 1.3

var TableCtrl = function($scope) {
        $scope.data = [
          ["val-11", "val-12", "val-13"],
          ["val-21", "val-22", "val-23"]
        ];
      }

到

angular.module("app",[])
.controller("TableCtrl",function($scope) {
        $scope.data = [
          ["val-11", "val-12", "val-13"],
          ["val-21", "val-22", "val-23"]
        ];
      })

在 html 中：

 <html ng-app="app">..........</html>

【讨论】：