从ng重复奇数内部的ng点击访问事件对象

Accessing event object from ng-click inside of ng-repeat oddity

本文关键字：ng 访问 事件 对象 内部      更新时间：2023-09-26

http://jsfiddle.net/5mbdgau1/3/

在我的fiddle示例中，我访问通过ng-click传入的事件对象。它工作得很好，尽管在处理"OtherService"的承诺时访问它时，它突然不在了？这是怎么回事？

使用jQuery是可行的，所以我认为这与Angular jQlite有关。此外，它在ng-repeat内部断裂，否则它会工作。我想知道为什么事件对象似乎消失了。谢谢

var myApp = angular.module('myApp',[]);
myApp.controller('TestController', function(TestService) {
  var vm = this;
  vm.foo = TestService;
  vm.items = [1, 2, 3, 4];
});
myApp.service('OtherService', function($http) {
  return $http.get('https://httpbin.org/get').then(function() {});
});
myApp.service('TestService', function(OtherService) {
  return function(evt) {
    var myText = evt.currentTarget.textContent;
    evt.currentTarget.textContent = "Bar";
    OtherService.then(function() {
      console.log(evt);
      evt.currentTarget.textContent =  myText + myText;
    });
  }
});

html:

<div ng-controller="TestController as vm">
  <div ng-repeat="item in vm.items">
      <div ng-click="vm.foo(item, $event)">{{item}}</div>
  </div>
</div>

您以错误的顺序传递来自ng-click的参数。从更改ng-click

<div ng-click="vm.foo(item, $event)">{{item}}</div>

至

<div ng-click="vm.foo($event, item)">{{item}}</div>

TestService函数首先需要一个事件对象。

// Code goes here
var myApp = angular.module('myApp',[]);
myApp.controller('TestController', function(TestService) {
  var vm = this;
  
  vm.foo = TestService;
  vm.items = [1, 2, 3, 4];
});
myApp.service('OtherService', function($http) {
  return $http.get('https://httpbin.org/get').then(function() {});
});
myApp.service('TestService', function(OtherService) {
  return function(item, evt) {
  console.log(evt, item)
    var myText = evt.currentTarget.textContent;
    evt.currentTarget.textContent = "Bar";
    OtherService.then(function() {
      console.log(evt);
      evt.currentTarget.textContent =  myText + myText;
    });
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="TestController as vm">
  <div ng-repeat="item in vm.items">
      <div ng-click="vm.foo(item, $event)">{{item}}</div>
  </div>
</div>

相关文章：