在我的 Controller 中,我有以下用户数组,将在部分 html 模板中通过迭代显示
在 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}
];
部分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
我的客户模板:
<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>
最佳答案
更“有 Angular ”的做事方式是使用 ng-mouseover
你可以把它放在“部分 html” View 中
<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>
关于javascript - Angular Directive(指令) : bind 'mouseover' event to an element,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28709683/