Question

I’m trying write a directive using angular js, in which a button click has to increment a count value.

On the click event handler I’m trying to increment the value using the scope.$apply construct but it is throwing an Syntax Error: Token 'undefined' not a primary expression at column NaN of the expression [count++] starting at [count++] error in the console.

markup

<div ng-app="myApp">
    <div ng-controller="MainCtrl">
        <div my-directive >
        </div>
    </div>
</div>

JS

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

myApp.directive('myDirective', function(){
    return {
        scope: {},
        template: '<div>{{count}}</div><input type="button" class="increment" value="Increment" />',
        link: function(scope, iElement, iAttrs, controller) {
            console.log('link', scope.count)
            iElement.on('click', '.increment', function(){
                console.log('click', scope.count);
                scope.$apply('count++');
            })
        },
        controller: function($scope){
            console.log('controller')
            $scope.count = 0;
        }
    };
});

myApp.controller('MainCtrl', ['$scope', function($scope){
}]);

Demo: Fiddle

Answer 1

Changing your expression to

count = count + 1

fixes the problem. Demo: Fiddle

Since Angular doesn’t use eval to evaluate expressions, you cannot use quite the full range of JavaScript in them; this is one of those exceptions. If you do need something a bit more powerful, you can pass a JavaScript function to $apply (demo: Fiddle):

scope.$apply(function() {
  scope.count++;
});