How to use AngularJS $scope?

Question

I have a paragraph and a counter. I want to update the counter when someone clicks on the paragraph using AngularJS. I wrote the following code:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

</head>
<body>

<p>Click on this paragraph.</p>

<div ng-app="myApp" ng-controller="myCtrl">

<h2>{{ count }}</h2>
</div>
<script>
var $ang;
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $ang=$scope;
    $ang.count=10;
});
$(document).ready(function(){
    $("p").click(function(){
        console.log("The paragraph was clicked.");
        $ang.count=$ang.count-1;
    });
});
</script> 
</body>
</html>

But it's not working. I guess I'am using $scope in a wrong way but I am not sure how to fix it.

Why you have kept `p` outside the angular app? What is your requirement? — Satpal, Dec 07 '16 at 08:05

score 1 · Answer 1 · edited May 23 '17 at 12:30

1

Don't mix angular with jQuery!

Rather follow angular way of doing it, Wrap all things in angular context just by moving ng-app & ng-controller directive on body and have and then place ng-click on p tag and do your desired task there

Markup

<body ng-app="myApp" ng-controller="myCtrl">
   <p ng-click="increamentCount()">Click on this paragraph.</p>
   <div>
       <h2>{{ count }}</h2>
   </div>
<body>

Code

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 10;
    $scope.increamentCount = function(){
      $scope.count = $scope.count + 1;
    }
});

Demo Plunker

edited May 23 '17 at 12:30

Community

1
1

answered Dec 07 '16 at 08:06

Pankaj Parkar

134,766
23
234
299

Why not, its called `jAngQuelarry`. Its like mixing soil with air and drink it. – lin Dec 07 '16 at 08:16
@lin Lol, that's great word *jAngQuelarry*, why you think that? – Pankaj Parkar Dec 07 '16 at 15:52
=) I'am just bored of all the jQuery newbies who don't know how angular is used in the right way. They all try to mix jQuery with angular. -> jAngQuelarry. – lin Dec 07 '16 at 19:48
Lol.. even I get bored so I do link that awesome answer which has covered all aspects. ;) – Pankaj Parkar Dec 07 '16 at 19:50

PhuLuong · Answer 2 · 2016-12-07T08:10:12.357

It is should be:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

</head>
<body>   

<div ng-app="myApp" ng-controller="myCtrl">
<p ng-click="click()">Click on this paragraph.</p>
<h2>{{ count }}</h2>
</div>
<script>
var $ang;
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 10;
    $scope.click = function(){
         $scope.count=$scope.count-1;
    }
});
</script> 
</body>
</html>

Well, you fixed it. Gratulations. – lin Dec 07 '16 at 08:10 — lin, Dec 07 '16 at 08:10

M K · Accepted Answer · 2016-12-07T09:05:37.627

-1

You had several errors in your code. I've refactored it a bit. Make sure to use ng-app and ng-controller properly. Do not use jquery in combination with angular. You can observe scope changes with the $watch function - this method is expensive in terms of computation and should not be overused.

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

</head>
<body>

<div ng-controller="myCtrl">
    <p ng-click="onClick()">Click on this paragraph.</p>

    <h2>{{ count }}</h2>
</div>

</div>
<script>


angular
    .module('myApp', ['ng'])

    .controller('myCtrl', function($scope) {
        $scope.count = 10
        $scope.onClick = function () {
            $scope.count--
        }

        // this is how you can observe state
        // changes outside of event handlers
        $scope.$watch('count', function(newValue, oldValue) {
            console.log("The paragraph was clicked.")
        })
    })
</script>
</body>
</html>

edited Dec 07 '16 at 09:05

answered Dec 07 '16 at 08:11

M K

9,138
7
43
44

1

Why do you need a watch here? – sisyphus Dec 07 '16 at 08:43
@sisyphus You don't really need it. It's there for demonstration purposes only - to show the author how to observe **state** changes outside of event handlers. – M K Dec 07 '16 at 09:04
You say "Do not use jQuery" but you load it as ressource? Why? – lin Dec 07 '16 at 09:28
@MK . Okay. I am glad we agree a watch is not at all needed in this case. – sisyphus Dec 07 '16 at 09:32
@lin it is a copy paste from authors snippet. If he thinks that he needs jquery, it's not up to me to completely remove it. – M K Dec 07 '16 at 09:38
@sisyphus absolutely – M K Dec 07 '16 at 09:43

How to use AngularJS $scope?

3 Answers3