$scope and Angularjs

Question

I'm new at angular and node so I have some problems.

I don't get what $scope do exactly and I don't know how to use it.

When I wrote the code like this, it didn't work

angular.module('app', [])
.controller('settingsCtrl', ['$scope',
    function($scope) {

        //define the date format
        $scope.date= new Date();
        $scope.h = date.getHours();
        $scope.m = date.getMinutes();

        if(6 < $scope.h < 14 && 0 < $scope.m < 60){
            $scope.text='Ok';
        }
    }]);

But when I wrote it like that, it works.

angular.module('app', [])
.controller('settingsCtrl', ['$scope',
    function($scope) {

        //define the date format
        var date= new Date();
        $scope.h = date.getHours();
        $scope.m = date.getMinutes();

        if(6 < $scope.h < 14 && 0 < $scope.m < 60){
            $scope.text='Ok';
        }
    }]);

And this is the HTML code

<div data-ng-controller="settingsCtrl">
    <div class="card">
        <div class="card-header ">
            <p>{{date | date}}</p>
        </div>
        <div class="card-block">
            <p>{{h}}</p>
            <p>{{m}}</p>
            <p>{{text}}</p>
        </div>
    </div>
</div>

Can anyone explain to me what is the difference between the two codes and how to get familiar with the $scope ?

Thanks

Have you worked through the official tutorial? Most people advise against using $scope in favour of the 'controllerAs' syntax these days. Also, if you have any choice in the matter, I'd really recommend learning a more modern framework than Angular 1 (Angular 4, React and Vue are all good options). — Joe Clay
– Joe Clay, Commented Jul 14, 2017 at 14:01
What does it didn't work exactly mean? Any error? Log? Could you be more specific, please? — lealceldeiro
– lealceldeiro, Commented Jul 14, 2017 at 14:02
@Anes while accepting answers, you should see who answered first. :( — Vivz
– Vivz, Commented Jul 14, 2017 at 14:52

lealceldeiro · Accepted Answer · 2017-08-15 20:45:13Z

2

The error in the first block of code is that you are trying to access the function getHours on an undefined object: date, instead of $scope (where you created the var date).

You should have tried $scope.date like this:

angular.module('app', [])
.controller('settingsCtrl', ['$scope',
    function($scope) {

        //define the date format
        $scope.date= new Date();
        $scope.h = $scope.date.getHours(); // notice here the change to $scope.date.getHours()
        $scope.m = $scope.date.getMinutes(); //idem

        if(6 < $scope.h < 14 && 0 < $scope.m < 60){
            $scope.text='Ok';
        }
    }]);

edited Aug 15, 2017 at 20:45

answered Jul 14, 2017 at 14:06

lealceldeiro

15.1k7 gold badges54 silver badges85 bronze badges

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

5 Comments

lealceldeiro Over a year ago

@Vivz I made the comment before I realized what was the error. I'm not a thief and I do not like stealing from other. I'm sorry you think like this and made such a comment. My answer is as valid as yours. Many times the same has happened with my answer and I never complained and offend other like you did. Shame on you! That's not the spirit in this Q&A Site

Vivz Over a year ago

I don't mean no offence. I am sorry for saying that but still the credit should always go to the one who answered first correctly. I apoligize for the comment and I take it back. But if you knew what the answer was and already saw there was an answer which means the exact same thing, then there is no point in answering again.

lealceldeiro Over a year ago

I agree with you and yet the OP marked mine as the "correct" which does not means yours could not have been select as "correct" too. Maybe if the OP would had have enough rep he would have upvoted yours. Anyways, apologies accepted and you have my upvote.

Vivz Over a year ago

I was just frustrated because sometimes when you devote your time and energy to help others, they don't appreciate your efforts. I am once again sorry for the comment. +1) as sign of apology. :)

lealceldeiro Over a year ago

No problem, I've felt like that too one time or another. Best thing is not to think too much about it and move on. Life continues. Cheers! :)

Vivz · Accepted Answer · 2017-07-14 14:15:13Z

2

Your first code didn't work because there is no object date in your first code. Your date in first code is an instance of $scope. Instead change it like this

angular.module('app', [])
.controller('settingsCtrl', ['$scope',
    function($scope) {

        //define the date format
        $scope.date= new Date();
        $scope.h = $scope.date.getHours();
        $scope.m = $scope.date.getMinutes();

        if(6 < $scope.h < 14 && 0 < $scope.m < 60){
            $scope.text='Ok';
        }
    }]);

In AngularJS, $scope is the application object (the owner of application variables and functions). It is basically the glue between application controller and the view.

For more info: https://docs.angularjs.org/guide/scope

edited Jul 14, 2017 at 14:15

answered Jul 14, 2017 at 13:59

Vivz

6,6282 gold badges19 silver badges34 bronze badges

Collectives™ on Stack Overflow

$scope and Angularjs

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related