javascript 角度指令：将“鼠标悬停”事件绑定到元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28709683/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular Directive: bind 'mouseover' event to an element
提问by TonyGW
In my controller, I have the following array of users, which will be displayed by iteration in the partial html template
在我的控制器中，我有以下用户数组，它们将在部分 html 模板中通过迭代显示
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:
部分html代码：
<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?
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 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>
回答by Cheruvian
The more "Angular" way of doing things would be to use ng-mouseover
更“角度”的做事方式是使用 ng-mouseover
You could put it in the "partial html" view
你可以把它放在“部分 html”视图中
<my-customer
info="user"
ng-mouseover="user.age = user.age + 1;"></my-customer>
ng-mouseoverevals the expression within the Angular context. This ensures everything is within the Angular context and you never have to worry about triggering digests manually.
ng-mouseover在 Angular 上下文中评估表达式。这确保一切都在 Angular 上下文中，您永远不必担心手动触发摘要。
https://docs.angularjs.org/api/ng/directive/ngMouseover
https://docs.angularjs.org/api/ng/directive/ngMouseover
per @floriban
每个@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>
回答by floribon
e.targetis the HTML element on which you have mouseovered. Use the real user info instead:
e.target是鼠标悬停在其上的 HTML 元素。改用真实的用户信息：
element.bind('mouseover', function(e) {
scope.customerInfo.age++;
});
Altermatively you can do everything in the HTML using the build-in ng-mouseoverdirective. In views/directives/myCustomer.html:
或者，您可以使用内置ng-mouseover指令在 HTML 中执行所有操作。在 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.
注意：您可能更喜欢 ng-mouseenter 不会在您鼠标悬停的每个像素上触发事件，而是在您用鼠标进入区域时触发事件。
