Updating Angular view model on button click

Question

I'm trying to understand how Angular data binding works. I have created this sample that displays {{values.count}} inside a span element:

<body ng-app="testApp" ng-controller="testCtrl as values">
    <span>Count = {{values.count}}</span>
    <button id="incr">++</button>
</body>
<script>
    testApp = angular.module("testApp", []);
    testApp.controller("testCtrl", function () {
        var values = this;
        values.count = 5;

        $("#incr").on('click', function () {
            values.count += 1;
        });
    });
</script>

If I click on the button, values.count is incremented, but the span is not updated. I can get it to work if I place a ng-click="values.Increment()" on the button and create a values.Increment method in the controller, but what is the difference that makes one work and the other not?

PSL · Accepted Answer · 2015-01-19T04:15:21.503

3

You are doing it the wrong way. When using angular, you don't need to bind event handlers/access DOM elements for this purpose. Use built-in ng-click directive.

<button ng-click="values.incr()">++</button>

and

values.incr = function(){
  values.count++;
}

You could even do it inline, <button ng-click="values.count = values.count+1">++</button> The reason why your code did not update DOM is because of the way angular works. Even though you are incrementing the value inside the manually bound event handler angular is unaware of the update and it does not update DOM binding with the new value. Though a bad practice in your specific case you can achieve that by doing $scope.$apply() (but ofcourse you need to inject $scope in your controller) as well inside the event handler to manually invoke the digest cycle. General thumb rule when working with angular is the controller do not access DOM directly, Instead it just sets up data for the view and with the help of bindings and other built-in or custom directives you get the intended behavior in your application.

Read about scope life cycle and digest cycle

edited Jan 19 '15 at 04:15

answered Jan 19 '15 at 03:51

PSL

123,204
21
253
243

So, looking at Angular events a bit more, what is the typical way you would handle events that angular doesn't define. For example, an event on an audio element (which is what I'm actually trying to do - my example was just an attempt at simplifying my problem)? – Neal Stublen Jan 19 '15 at 04:17
@NealS. If the event is not available you could create custom directives on your own to handle it. For example take a [look at this answer](http://stackoverflow.com/questions/26147584/how-to-disable-ngtouch-conditionally-and-fallback-to-ng-click) which creates a custom directive to manage a specific event. – PSL Jan 19 '15 at 04:18
One other question...is there any concern with mixing calls into the controller with your HTML markup? My tendency would have been to avoid something like that. – Neal Stublen Jan 19 '15 at 04:21
1

I am sure [this answer](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) will provide you better clarification on that thought process. :) – PSL Jan 19 '15 at 04:24

Updating Angular view model on button click

1 Answers1