Why Does Array Assignment in Controller Break Angular Code?

Question

This is more of a conceptual question. I have the following HTML page:

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>

With all files at the root of the directory, I also have the following JS file:

app.js

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

When this runs, I of course receive the greeting "Hello" on the HTML page.

However, when I attempt to append an object (for a future ng-repeat element) to the same controller:

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"
        }
    ];
}

The Angular binding is broken, and instead of the greeting "Hello", I receive the {{ name }} expression. (This is with or without the trailing semi-colon on the 'users' object assignment.)

Is there something about my object assignment that caused a break in my Angular code? I wouldn't be exactly sure how to explain what happened.

does the {{ name }} expression change to "Hello", after a few seconds or does it stay there whole time? — TimCodes
– TimCodes, Commented Oct 19, 2015 at 19:03
@dfsq Can't believe I hadn't done that. This is what happens when you're editing your JS files using the SSH. There was a spelling error that I wasn't catching on the black and green screen. Kudos! Please resubmit to be credited for answer. Salutations... — Mindsect Team
– Mindsect Team, Commented Oct 19, 2015 at 19:06
@TimCodes it stays there the whole time. There was a comma instead of a colon on the actual object (too sensitive to be pasted on a public board). Had I been using an actual GUI instead of Nano, I would have caught it myself. Two hours of insanity before posting the problem here. Thanks for the input. — Mindsect Team
– Mindsect Team, Commented Oct 19, 2015 at 19:08

Mindsect Team · Accepted Answer · 2015-10-19 20:02:23Z

1

@dfsq is off somewhere helping others, so he couldn't properly receive credit for answering this question.

The issue was after inserting an array object into my Angular 'myController', the two-way binding was broken for the expression on the page.

I was using nano from the command line (SSH) on the server to edit the file and could not easily see that one of the key value pairs in the array

("key": "value")

had a comma instead of a colon

("key","value)

so it was throwing the following error:

Uncaught SyntaxError: Unexpected token ,

The issue was, I could have used the developer tools on my browser to check the console log. @dfsq suggested this, and after viewing the console log, it was easy to see the error thrown and exactly which line was throwing it.

Thanks again, @dfsq

answered Oct 19, 2015 at 20:02

Mindsect Team

2,6716 gold badges32 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why Does Array Assignment in Controller Break Angular Code?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related