不同指令的角度变化css

Question

我有一个真正的问题，要用Angular和CSS更改一些简单的CSS。

我有代码：

<div class="progress">
    <div class="progress-bar progress-bar-info" ng-class="stepOne">1</div>
    <div class="progress-bar progress-bar-info" ng-class="stepTwo">2</div>
    <div class="progress-bar progress-bar-info" ng-class="stepTree">3</div>
</div>

<div class="well col-lg-12">
    <applystepone ng-if="step.one"></applystepone>  <!-- this is my directive -->
    <applysteptwo ng-if="step.two"></applysteptwo>
    <applysteptree ng-if="step.tree"></applysteptree> 

</div>

在指令：applystepone我有一个按钮。 如果我单击按钮，我希望进度条的css更改为ng-class="stepOne"

指令中的按钮：

<div class="col-lg-12 text-center">
    <a class="btn btn-primary" ng-click="steptwo(); stepOne='valide-step'">Next step</a> 
</div>

和指令：

app.directive('applystepone', function() {

    return {
        restrict: 'E',
        templateUrl: 'partials/apply-step-one.html'
    };
});

如果我单击该按钮，则没有任何附加内容

ng-class="stepOne"

如果我放置在apply-step-one.html

<p ng-class="stepOne">Test </p>

CSS可以正常工作，因此按钮可以正常工作。 我想这是因为我的ng-click在指令中，而不是ng-class="stepOne" 。

Answer 1

尝试：

<a class="btn btn-primary" ng-click="steptwo(); $parent.stepOne='valide-step'">Next step</a>

$ parent将从指令内部检索父作用域。

Answer 2

不能100％地确定我理解了整个事情，但是事情已经过去了。

我认为您应该考虑修改CSS（未显示，顺便说一句）和代码：

<div class="progress">
    <div class="progress-bar progress-bar-info" ng-class="{active: step.one}">1</div>
    <div class="progress-bar progress-bar-info" ng-class="{active: step.two}">2</div>
    <div class="progress-bar progress-bar-info" ng-class="{active: step.three}">3</div>
</div>

这将根据范围中的步骤触发进度条上的active类。

然后，代替

<p ng-class="stepOne">Test </p>

您可能应该使用更通用的方法，例如：

<p class="button">Test </p>

并修改CSS以触发它，例如：

.well p.button {
    color: green;
} 

---

而且，如果您只想修改按钮的类，这很简单：

<p ng-class="{'stepOne': step.one, 'stepTwo': step.two, 'stepThree': step.three}">Test </p>

进度栏div类似于我上面描述的内容。