CODEWITHSUNDEEP
angularjsevent-handling
qqqqqqq
qqqqqqq

Reputation: 2227

Why can not I use the pre-increment operator in the `ng-mousemove` in AngularJS?

Why can not I use the pre-increment operator in the ng-mousemove in AngularJS?

Here is my code:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
});
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
    <h1 ng-mousemove="++count;">Mouse Over Me!</h1>
    <h2>{{ count }}</h2>
</body>

The count is not incremented. But as soon as I change the code to the:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
});
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
  <h1 ng-mousemove="count = count + 1;">Mouse Over Me!</h1>
  <h2>{{ count }}</h2>  
</body>

Then the code works just fine. Why does the AngularJS not allow the ++count;, but allows the count = count + 1;?

Upvotes: 0

Views: 87

Answers (1)

georgeawg
georgeawg

Reputation: 48968

The ng-mouseover directive evaluates AngularJS expressions which are JavaScript-like but have differences.

From the Docs:

AngularJS Expressions vs. JavaScript Expressions

AngularJS expressions are like JavaScript expressions with the following differences:

  • Context: JavaScript expressions are evaluated against the global window. In AngularJS, expressions are evaluated against a scope object.

  • Forgiving: In JavaScript, trying to evaluate undefined properties generates ReferenceError or TypeError. In AngularJS, expression evaluation is forgiving to undefined and null.

  • Filters: You can use filters within expressions to format data before displaying it.

  • No Control Flow Statements: You cannot use the following in an AngularJS expression: conditionals, loops, or exceptions.

  • No Function Declarations: You cannot declare functions in an AngularJS expression, even inside ng-init directive.

  • No RegExp Creation With Literal Notation: You cannot create regular expressions in an AngularJS expression. An exception to this rule is ng-pattern which accepts valid RegExp.

  • No Object Creation With New Operator: You cannot use new operator in an AngularJS expression.

  • No Bitwise, Comma, And Void Operators: You cannot use Bitwise, , or void operators in an AngularJS expression.

Note: This is not a comprehensive list of the differences.

Under the hood, the AngularJS framework has its own expression parser written in JavaScript which avoids the enormous security risk of using eval(). If you want to eval() an AngularJS expression yourself, use the $rootScope/$scope $eval() method or the $parse Service.

As seen in the example, the AngularJS expression parser does not parse the increment (++) operator or the decrement (--) operator.

The operators which AngularJS supports are:1

+ - * / % === !== == != < > <= >= && || ! = |

From the Docs:

Sandbox removal

Each version of AngularJS 1 up to, but not including 1.6, contained an expression sandbox, which reduced the surface area of the vulnerability but never removed it. In AngularJS 1.6 we removed this sandbox as developers kept relying upon it as a security feature even though it was always possible to access arbitrary JavaScript code if one could control the AngularJS templates or expressions of applications.

For more information, see

Upvotes: 2

Related Questions