Reusing code but with custom content

Question

I have a bunch of pages with code for a nice looking footer area for buttons and stuff at the bottom of the page:

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
    <div class="container">
        <div class="navbar-inner">
            <footer>
                <a class="btn btn-warning actionButton" href="#/">
                    <i class="glyphicon glyphicon-trash icon-white" />
                    Cancel
                </a>
                <a class="btn btn-primary actionButton" data-ng-click="saveSampleForm(sampleForm)" data-ng-disabled="form.$invalid">
                    <i class="glyphicon glyphicon-ok icon-white" />
                    Save
                </a>
                <div class="version">v{{applicationdata.Version}}</div>
            </footer>
        </div>
    </div>
</nav>

I know about the nginclude tag, but is there a way to reuse the nav portion of this code, but have custom <footer> content? The buttons change from page to page. Maybe a directive? Still learning this stuff... Edit: I know I could add the code for the <footer> content to my $scope and then use {{footerContent}}, but I would prefer to keep html out of my model.

Buu · Accepted Answer · 2013-09-16 22:23:38Z

1

You can certainly do so. Here's an idea using transclusion with directives.

Directive

app.directive('navFooter', function() {
  return {
    templateUrl: 'nav.html',
    replace: true,
    transclude: true,
    restrict: 'E'
  }
})

nav.html

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
    <div class="container">
        <div class="navbar-inner">
            <footer ng-transclude>
            </footer>
        </div>
    </div>
</nav>

Usage

<nav-footer>
  <a class="btn btn-warning actionButton" href="#/">
      <i class="glyphicon glyphicon-trash icon-white"></i>
      Cancel
  </a>
  <a class="btn btn-primary actionButton" data-ng-click="saveSampleForm(sampleForm)" data-ng-disabled="form.$invalid">
      <i class="glyphicon glyphicon-ok icon-white"></i>
      Save
  </a>
  <div class="version">v{{applicationdata.Version}}</div>
</nav-footer>

Demo link.

answered Sep 16, 2013 at 22:23

Buu

50.5k6 gold badges72 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Nicros Over a year ago

Actually- follow up question. nav-footer shows as unable to resolve in my page... no biggie, but is there a way to get this to be happy?

Buu Over a year ago

You meant the sample link I sent doesn't work? plnkr.co/edit/iTysbI4EVI6Crrs69XMv?p=preview? It renders fine on my end. What's the error message?

Nicros Over a year ago

The message is Cannot resolve tag nav-footer. This is in VS2012. Everything works just fine, but this warning pops up. No biggie, just thought I would ask.

Buu Over a year ago

Lol, that's another story altogether. VS2012 apparently doesn't like tags it doesn't understand. Either see if you can configure VS.NET, or change the directive to be attribute directive, see this update for example: plnkr.co/edit/NkZ5JXsRKASPNPDzI4AT?p=preview. Same behavior, just minor tweak to keep original tag.

Nicros Over a year ago

Close enough! Using restrict 'A' and this <nav data-nav-footer> takes care of the warning, and works. Cheers.

Collectives™ on Stack Overflow

Reusing code but with custom content

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related