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
Post a Comment