Angular: scope variables

Question

I have a code taken from the ng-book:

<!doctype html>
<html ng-app>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js"></script>
</head>
<body>
    <div ng-controller="MyController">
        <h1>Hello {{ clock.now }}!</h1>
    </div>
    <script type="text/javascript">
    function MyController($scope) {
        var updateClock = function() {
            $scope.clock.now = new Date();
        };
        setInterval(function() {
            $scope.$apply(updateClock);
        }, 1000);
        updateClock();
    };
    </script>
  </body>
</html>

I solved it doing this:

<!doctype html>
<html ng-app>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.js"></script>
</head>
<body>
    <div ng-controller="MyController">
        <h1>Hello {{ clock }}!</h1>
    </div>
    <script type="text/javascript">
    function MyController($scope) {
        var updateClock = function() {
            $scope.clock = {'now': new Date()};
        };
        setInterval(function() {
            $scope.$apply(updateClock);
        }, 1000);
        updateClock();
    };
    </script>
  </body>
</html>

My question is why wasn't the first code not working?

UPDATE: Updated the second code.

Eduard Gamonal · Accepted Answer · 2013-11-05 12:37:51Z

6

with $scope.clock.now = new Date(); you're trying to set a property nowto an undefined object (clock). with $scope.clock = {'now': new Date()}; you set clock to be an object and then assign the property. a verbose way is:

$scope.clock = {}; 
$scope.clock.now = 'value';

edited Nov 5, 2013 at 12:37

answered Nov 5, 2013 at 12:30

Eduard Gamonal

8,0315 gold badges44 silver badges48 bronze badges

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

1 Comment

Eduard Gamonal Over a year ago

ah I see, well the explanation still applies. i'll adapt it

andygoestohollywood · Accepted Answer · 2013-11-05 12:24:51Z

1

Because there was no 'now' property on the clock object in the first example

answered Nov 5, 2013 at 12:24

andygoestohollywood

1,2841 gold badge10 silver badges14 bronze badges

2 Comments

andygoestohollywood Over a year ago

no worries, you've changed your question now though, so my answer looks stupid :)

Teej Over a year ago

It is still valid. It answers why.. The other answers are just more 'complete' :)

Ryan Quinn · Accepted Answer · 2013-11-05 12:36:48Z

1

the now() method of Date is a static method, so you could say this:

<div ng-controller="MyController">
    <h1>Hello {{ clock.now() }}!</h1>
</div>
<script type="text/javascript">
function MyController($scope) {
    var updateClock = function() {
        $scope.clock = Date;
    };

and it will give you milliseconds, if you really want to call the now method of the date object.

answered Nov 5, 2013 at 12:36

Ryan Quinn

1,2051 gold badge16 silver badges29 bronze badges

2 Comments

Kos Prov Over a year ago

I suspect {{ clock.now() }} will lead to a max digest iterations error. Angular finishes its digest cycle when no $watch expression ({{}} is a hidden $watch) gives a different value compared to the previous digest iteration. Since clock.now() will give a different value every time it is checked, digest with not complete (10 iterations max -> error).

Ryan Quinn Over a year ago

That is a good observation. It didn't have any problem when I threw it together and tried it in Firefox, but ymmv. I don't think it is a solution for what he is trying to do anyway, just a note on what is happening.

Severin · Accepted Answer · 2013-11-05 12:43:49Z

0

The first code isn't working because there is no $scope.clock defined (Angular raises an error: TypeError: Cannot set property 'now' of undefined)

So this

$scope.clock.now = new Date();

should be this:

$scope.clock = {};
$scope.clock.now = new Date();

or like you solved it:

$scope.clock = {now: new Date()}

answered Nov 5, 2013 at 12:43

Severin

3811 silver badge3 bronze badges

Collectives™ on Stack Overflow

Angular: scope variables

4 Answers 4

1 Comment

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related