如何在AngularJS中使用ng-style覆盖CSS子类属性？

Question

我想在AngularJS中使用ng样式覆盖CSS子类属性。

例如，我的代码是：

.spin-preloader
{
        width:54px;
        -webkit-animation:mymove 1s infinite;
        -animation:mymove 1s infinite;
}

@webkit-animation mymove
{
    from  
    {
        left:0px;
    }
    to
    {
        left:80px;  
    }
}

我想写这样的html代码：

<div class="spin-preloader" ng-style="-----?----" />

我想重写@webkit-animation类的' to‘的80像素

有没有办法做到这一点？我的意思是，实现这一目标的正确方法应该是什么？

Answer 1

您可以在不设置class属性的情况下通过ng-style应用您的类，因此不需要覆盖任何内容：

HTML：

<div ng-controller="MyCtrl">
    <div ng-style="{'spin-preloader': showSpinPreloader, 'no-spin-preloader': !showSpinPreloader}"></div>
</div>

JS：

app.controller("MyCtrl", function ($scope) {
    // do some magic here to determine whether which CSS class to apply
    $scope.showSpinPreloader = true;
});