如何在AngularJS中使用ng样式重写css的子类属性

Question

我想在AngularJS中使用ng-style覆盖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="-----?----" />

我想覆盖80px的@webkit-animation类的'to'

有什么办法可以做到吗?我的意思是，实现这一目标的正确方法应该是什么?

Answer 1

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

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;
});