CODEWITHSUNDEEP
javascriptangularjs
Grzegorz
Grzegorz

Reputation: 3335

Why is this <td ng-mouseenter="name='John'"> not working?

The example below is extremely simple (edited after sp00m correct for the previous example response):

index.html: (part)

<table>
  <tr ng-repeat="r in [1,2,3]">
    <td ng-repeat="c in [1,2]" ng-mouseenter="name='John'">
      [{{r}},{{c}}]
    </td>
  </tr>
</table>
Hello {{name}}!

app.js:

app.controller('MainCtrl', function($scope) {
    $scope.name = 'World';
});

I am expecting the 'World' word being changed to 'John' being shown but nothing occurs when I am mousing over the cell.

I am posting plnkr below to show the problem. What am I doing wrong?! What am I missing? Is the problem with AngularJS 1.5.x plnkr is using that does not handle ng-mouseenter in <td>? Note that ng-repeat is not an issue - when I put manually new row this will not work either.

http://plnkr.co/edit/x1peSJyc50yqa1AM73GZ

Upvotes: 0

Views: 113

Answers (2)

Sam
Sam

Reputation: 2425

Actually i had a same problem, i avoid to use the plain scope variables like this $scope.name, it may create some problems. so in the above plunker, declare a scope object something like this $scope.name = {firstName: 'World'} instead of plain scope variable. Then in html use this ng-mouseenter="name.firstName='John';", and it should work with this Hello {{name.firstName}}.

Upvotes: 1

sp00m
sp00m

Reputation: 48817

It is actually working, you just haven't defined alert in your $scope:

$scope.alert = function (...) { ... };

Upvotes: 4

Related Questions