不同指令的角度变化css

Question

I have a real problem to change some simple css with Angular and css.

I have the code:

<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>

In the directive : applystepone i have a button. If I click on the button i want the css of the progress bar change for ng-class="stepOne"

The button in the directive :

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

And the directive :

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

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

If i click on the button, nothing append to the

ng-class="stepOne"

If i place in the apply-step-one.html

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

The css works, so the button works fine. I suppose it's because my ng-click is in the directive and not the ng-class="stepOne" .

Answer 1

Try:

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

$parent will retrieve the parent scope from inside your directive.

Answer 2

Not 100% sure I understood the whole thing, but here it goes.

I think you should consider modifying your CSS (which you haven't shown, btw) and the code slightly:

<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>

This would trigger the active class on your progress bar based on the step in scope.

Then, instead of

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

you should probably use something more generic like:

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

and modify the CSS to trigger it, for example:

.well p.button {
    color: green;
} 

---

And if you just want to modify the class of the button, it's simple:

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

It's similar to what I described above, for the progress bar divs.