CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-directiveangularjs-scope
Joe Lewis
Joe Lewis

Reputation: 978

Load directives based on value

my issue is that I have a directive as follow:

app.directive('bottomNavBar', [function () {
return {
  templateUrl: 'views/bottomNavBar.html',
  restrict: 'A',
  replace: true,
  transclude: true
};

Inside the bottomNavBar.html we just have something that looks like:

<!--more stuff above-->

<nav>
    <div ng-transclude></div>
</nav>

<!--more stuff below-->

Now what I want to do in the index.html is define this directive with the possibility of loading a second directive based on a value (I have no yet decided where it comes from -a model value, a controllers value, etc.-)

<div ng-controller="MyController">
    <div bottom-nav-bar>
         <!--Possibility of loading a directive or other one based on a value and transclude it here.-->
    </div>
</div>

I have read different approaches but some of them bind the functionality of the directive to the controllers value, I would like to follow best practices and try to isolate the directives from controller's values, etc. in order to be reusable in a future.

Basically the goal is to have a navigation bar and according to a tab/checkbox/whatever selection load different buttons in the navigation bar with different configuration and styles, that's why I decided to code different directives for each configuration of the buttons/styles, etc.

Thanks in advance.

Upvotes: 0

Views: 66

Answers (1)

trey-jones
trey-jones

Reputation: 3437

The cleanest solution that came to me quickly:

<div ng-controller="MyController">
    <div bottom-nav-bar>
        <div nav-button-one ng-if='!!hasNav1'></div>
        <div nav-button-two ng-if='!!hasNav2'></div>
        <div nav-button-three ng-if='!!hasNav3' color='pink'></div>
    </div>
</div>

I think this is basically what you were getting at. Each button is it's own directive, and it is either there or not there based on whether the controller thinks it should be.

Another possibility would be to include the sub-directives in the main directive template, and then configure the main directive to show or not:

<div bottom-nav-bar nav-one='true' nav-two='true' nav-three='true'></div>

I don't like it as much, but it's potentially less code each time you use the main directive, if you don't have to configure the buttons very heavily. I prefer option 1.

Upvotes: 1

Related Questions