Question: I am new to angular and here is the problem I am having. I have created a directive:

```
angular
.module('app.simpledirective')
.directive('simpledirective', function() {
    return {
        templateUrl: 'app/simpledirective/sample.html',
        bindToController: true,
        controller: SampleController
    };
});

```

function SampleController($scope) { }

//Here is the sample.html for this directive

```
<div class="outer">
    <div class="inner1">Show</div>
    <div class="inner2">Don't Show</div>
</div>

```

The problem I am having is, if I call this directive in 2 different places ie:

```
<div>
    <simpledirective></simpledirective>        
</div>

```

How can I make it that in one place it displays both classes, "inner1" and "inner2", but in the second place, it only shows class "inner1", ie "inner2" is hidden.

Thanks for any help!

Answer: 
You can try passing parameters to the directive:

```
return {
    scope: {
      inner1: '=', 
      inner2: '='
    },
    templateUrl: 'app/simpledirective/sample.html',
    bindToController: true,
    controller: SampleController
};

```

Pass them like so:

```
<simpledirective inner1="true" inner2="false"></simpledirective>

```

Then use `ng-class` to decide if the classes should be applied or not:

```
<div class="outer">
  <div ng-class="{inner1: inner1}">Show</div>
  <div ng-class="{inner2: inner2}">Don't Show</div>
</div>

```
You can also do this by adding class on parent class like  

**Place 1.**

```
<div>
    <simpledirective></simpledirective>        
</div>

```

**Place 2.**

```
<div class="inner2Hide">
    <simpledirective></simpledirective>        
</div>

```

**css:**

```
.inner2Hide .inner2 {
  display:none
}

```