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 在 cmets 中建议的解决方案）

$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