Testing Apply vs. Digest Behaviour

by sjmcpherson

HTML

<script src="http://code.angularjs.org/1.1.0/angular.min.js"></script>
<div ng-app="testApp">
    <div ng-controller="Outer">
        Outer:: {{outer}}
        <div ng-controller="Inner">
            Inner:: {{inner}}
            <button apply-test>Calls scope.$apply</button>  
            <button digest-test>Calls scope.$digest</button>              
        </div>   
    </div>    
</div>

CSS

j

JavaScript

var app = angular.module('testApp', []);

function Inner($scope) {
    $scope.inner = 0;
    
    $scope.watch("inner", function() {
        console.log("Inner value changed");
    });
}

function Outer($scope) {
    $scope.outer = 0;
    
    $scope.watch("outer", function() {
        console.log("Outer value changed");
    });
}

app.directive('applyTest', function() {
    return function(scope, element, attrs) {
        element.bind('click', function(e) {
            scope.$parent.outer = scope.$parent.outer + 1;
            scope.inner = scope.inner + 1;
            scope.$apply();
        });

    };
});

app.directive('digestTest', function() {
    return function(scope, element, attrs) {
        element.bind('click', function(e) {
            scope.$parent.outer = scope.$parent.outer + 1;
            scope.inner = scope.inner + 1;
            scope.$digest();
        });
    };
});