Angular Directive: bind 'mouseover' event to an element

Question

In my controller, I have the following array of users, which will be displayed by iteration in the partial html template

in controller:

vm.users = [
      {"username": "johnDoe", "address": "Saltlake City, UT", "age": 34},
      {"username": "janeDoe", "address": "Denver, CO", "age": 33},
      {"username": "patrickDoe", "address": "San Francisco, CA", "age": 35}
    ];

partial html code:

<div ng-repeat="user in mapView.users">
<my-customer info="user"></my-customer></div>

myCustomer directive: I wish to increment the customer's age when the mouseover event happens on the customer. Is it possible to do this in the directive?

angular
    .module('angularApp')
    .directive('myCustomer', function() {

  return {
    restrict: 'E',
    link: function(scope, element) {
      element.bind('mouseover', function(e) {
        e.target.age++; // this is not working, need help here!
        console.log(e.target, 'mouseover');
      });
    },
    scope: {
      customerInfo: '=info'
    },

    templateUrl: 'views/directives/myCustomer.html'
  };

}); //myCustomer

myCustomer template:

<span>
  <label class="label-success">Username: {{customerInfo.username}}</label>
</span>
  <span>
    <label class="label-default">{{customerInfo.address}}</label>
  </span>
  <span>
    <label class="label-danger">{{customerInfo.age}}</label>
  </span>

Solution 1

The more "Angular" way of doing things would be to use ng-mouseover

You could put it in the "partial html" view

<my-customer 
    info="user"
    ng-mouseover="user.age = user.age + 1;"></my-customer>

ng-mouseover evals the expression within the Angular context. This ensures everything is within the Angular context and you never have to worry about triggering digests manually.

https://docs.angularjs.org/api/ng/directive/ngMouseover

per @floriban

You could also put it within the directive template itself

<div ng-mouseover="customerInfo.age = customerInfo.age + 1;">
  <span>
    <label class="label-success">Username: {{customerInfo.username}}</label>
  </span>
  <span>
    <label class="label-default">{{customerInfo.address}}</label>
  </span>
  <span>
    <label class="label-danger">{{customerInfo.age}}</label>
  </span>
</div>

Solution 2

e.target is the HTML element on which you have mouseovered. Use the real user info instead:

element.bind('mouseover', function(e) {
   scope.customerInfo.age++;
});

Altermatively you can do everything in the HTML using the build-in ng-mouseover directive. In views/directives/myCustomer.html:

<div ng-mouseover="customerInfo.age++"> ... content of the template </div>

NB: you may prefer ng-mouseenter to not fire the event on every pixel you mouse over, but just when you enter the zone with your mouse.