不同指令的角度变化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 我有一个按钮。如果我单击按钮，我希望 ng-class="stepOne" 更改进度条的 css

指令中的按钮：

<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

不是 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 和我上面描述的类似。

Answer 2

试试：

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

$parent 将从您的指令中检索父范围。