为什么控制器中的数组赋值会破坏 Angular 代码？

Question

这更像是一个概念性问题。我有以下 HTML 页面：

index.html

<!doctype html>
<html ng-app="myApp">

    <head>
        <title>Angular Page</title>
        <script src="angular.min.js"></script>
        <script src="app.js"></script>
    </head>

    <body>
        <div ng-controller="myController">
            {{ greeting }}
        </div>
    </body>

</html>

所有文件在目录的根目录，我还有以下 JS 文件：

app.js

var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
    $scope.greeting = "Hello";
}

运行时，我当然会在 HTML 页面上收到问候语 "Hello"。

但是，当我尝试将对象（用于未来的 ng-repeat 元素）附加到同一个控制器时：

var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
    $scope.greeting = "Hello";

    $scope.users = [
        {
            "name": "Michael",
            "industry": "Music"
        },
        {
            "name": "Michael",
            "industry": "Boxing"
        },
        {
            "name": "Michael",
            "industry": "Basketball"
        }
    ];
}

Angular 绑定已损坏，我收到的不是问候 "Hello"，而是 {{ name }} 表达式。（这是在 'users' 对象分配中有或没有尾随分号。）

我的对象分配是否有什么导致我的 Angular 代码中断？我不确定如何解释发生的事情。

Answer 1

@dfsq 忙于帮助他人，因此他无法因回答此问题而得到适当的奖励。

问题是在我的 Angular 'myController' 中插入数组对象后，页面上的表达式的双向绑定被破坏。

我在服务器的命令行 (SSH) 中使用 nano 编辑文件，但无法轻易看到数组中的键值对之一

("key": "value")

有逗号而不是冒号

("key","value)

所以它抛出以下错误：

Uncaught SyntaxError: Unexpected token ,

问题是，我本可以使用浏览器上的开发人员工具来检查控制台日志。 @dfsq 提出了这个建议，在查看控制台日志后，很容易看到抛出的错误以及抛出它的确切行。

再次感谢@dfsq

为什么控制器中的数组赋值会破坏 Angular 代码？

Why Does Array Assignment in Controller Break Angular Code?

javascript

arrays

binding

angularjs