AngularJS - 將子類添加到子元素

Question

我有一個按鈕，，如example.html所示，它位於ng-repeat指令內。因此，還有更多喜歡它的人。 如何在調用syncAccount()時將fa-spin類添加到子元素i，然後從pullProfile()的末尾刪除同一子元素中的類fa-spin？

----- example.html的

<md-button class="md-raised md-default" ng-click="syncAccount(account.username)"> 
    <i class="fal fa-sync"></i> Re-sync 
</md-button> 

----- example.controller.js

$scope.syncAccount = function(username) 
{ 
    console.log('syncing ' + username + ' ...') 
    $scope.pullProfile(username) 
} 

$scope.pullProfile = function(username) 
{ 
    // do stuff 
    // remove the fa-spin class 
} 

我一直在使用angular.element().closest()沒有成功嘗試。例如：

----- example.html的

<md-button class="md-raised md-default" ng-click="syncAccount($event, account.username)"> 
    <i class="fal fa-sync"></i> Re-sync 
</md-button> 

----- example.controller.js

（更新，以反映溶液通過chiliNUT建議在評論中）

$scope.syncAccount = function($event, username) 
{ 
    var spinElement = angular.element($event.currentTarget).find('.fa-sync') 
    spinElement.addClass('fa-spin') 

    console.log('syncing ' + username + ' ...') 
    $scope.pullProfile(spinElement, username) 
} 

$scope.pullProfile = function(spinElement, username) 
{ 
    // do stuff 
    spinElement.removeClass('fa-spin') 
} 

旁白：

使用.find('i')爲.find()僅由標籤名限於查找沒有工作。在這裏看到：https://docs.angularjs.org/api/ng/function/angular.element

Answer 1

試試這個

<md-button class="md-raised md-default" ng-click="syncAccount($event, account.username)"> 
    <i class="fa {{ syncInProgress ? 'fa-spin' : 'fa-sync' }} "></i> Re-sync 
</md-button> 

在控制器

$scope.syncInProgress = false; 
$scope.syncAccount = function(index) { 
    $scope.syncInProgress = true; 
}; 

同步後請的syncInProgress值更改爲false