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

【问题标题】：Why Does Array Assignment in Controller Break Angular Code?为什么控制器中的数组赋值会破坏 Angular 代码？
【发布时间】：2016-01-18 05:39:33
【问题描述】：

这更像是一个概念性问题。我有以下 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 }} 表达式。（这是在“用户”对象分配上带有或不带有尾随分号的情况。）

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

【问题讨论】：

阅读控制台中的错误，解释问题所在。
{{ name }} 表达式是在几秒钟后变为“Hello”还是一直停留在那里？
@dfsq 不敢相信我没有这样做。当您使用 SSH 编辑 JS 文件时会发生这种情况。有一个拼写错误，我在黑屏和绿屏上没有发现。赞！请重新提交以获得答案。问候...
@TimCodes 它一直呆在那里。实际对象上有逗号而不是冒号（太敏感而无法粘贴在公共板上）。如果我使用的是实际的 GUI 而不是 Nano，我会自己抓住它。在这里发布问题之前的两个小时的精神错乱。感谢您的意见。

标签： javascript arrays angularjs binding

【解决方案1】：

@dfsq 不在某处帮助他人，因此他无法因回答此问题而获得适当的赞誉。

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

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

("key": "value")

用逗号代替冒号

("key","value)

所以它抛出了以下错误：

Uncaught SyntaxError: Unexpected token ,

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

再次感谢@dfsq

【讨论】：