javascript - AngularJS replaced directive on specific pages? -


i have index.html main view , 2 directive, on site header , 1 footer:

 <div class="site">  <!-- header --> <header pb-ds-header pb-fixed-navbar></header>  <!-- content --> <div ui-view="" class="view-animate site-content" autoscroll="false"></div>  <!-- footer --> <footer pb-ds-footer></footer>  </div> 

the header directive is

(function() {  'use strict';  angular.module('app').directive('pbdsheader', function() {   return {     restrict: 'a',     templateurl: 'modules/main/templates/header.html',     controller: 'headercontroller header'   }; });  })(); 

ok, works fine. there few pages there no header required, here use body class hide header.

however, have several pages need display different header template rest of site has.

whats best way this?

to this, you'd use ui-router's named views:

<div class="site">  <!-- header --> <div ui-view="header"></div>  <!-- content --> <div ui-view="body" class="view-animate site-content" autoscroll="false"></div>  <!-- footer --> <footer pb-ds-footer></footer>  </div> 

and in routes definition:

$stateprovider   .state('some.state', {     views: {       header: 'modules/main/templates/header.html',       body: 'templates/some/body.html'     }   })   .state('some.other.state', {     views: {       header: '', // no header in state       body: 'templates/other/body.html'     }   }); 

Comments

Popular posts from this blog

javascript - Chart.js (Radar Chart) different scaleLineColor for each scaleLine -

apache - Error with PHP mail(): Multiple or malformed newlines found in additional_header -

java - Android – MapFragment overlay button shadow, just like MyLocation button -