不同指令的角度變化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類似於我上面描述的內容。