Доступ к объекту события из ng-click внутри странности ng-repeat

Question

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

В моем примере скрипта я получаю доступ к объекту события, который передается через 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>

Answer 1

Вы передаете аргументы от 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>