角度指令:绑定'鼠标悬停'事件添加到元素

Angular Directive: bind 'mouseover' event to an element

本文关键字：事件 添加 元素 悬停 鼠标 绑定 指令      更新时间：2024-04-25

在我的控制器中，我有以下用户数组，这些用户将通过迭代显示在部分html模板中

在控制器中：

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}
    ];

部分html代码：

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

myCustomer指令：当鼠标悬停事件发生在客户身上时，我希望增加客户的年龄。指令中有可能这样做吗？

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模板：

<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>

更"角度"的做事方式是使用ng-mouseover

你可以把它放在"部分html"视图

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

ng-mouseover在Angular上下文中评估表达式。这确保了所有内容都在Angular上下文中，并且您永远不必担心手动触发摘要。

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

每个@floriban

你也可以把它放在指令模板本身中

<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>

e.target是鼠标悬停在其上的HTML元素。使用真实的用户信息：

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

或者，您可以使用内置ng-mouseover指令在HTML中执行所有操作。在视图/指令/myCustomer.html中：

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

注意：你可能更喜欢ng mouseenter，而不是在你鼠标悬停的每个像素上触发事件，而是在你用鼠标进入区域时触发事件

相关文章：