Question

我有一个按钮，，见于example.html ，它位于ng-repeat指令中。因此，还有更多喜欢它。 如何在调用fa-spin时将类i添加到子syncAccount()元素，然后从同一子元素中删除类fa-spin，结束pullProfile()？

----- 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

（更新以反映辣椒在评论中的建议）

$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

AngularJS - 将类添加到子元素

1 个答案: