Fatal编程技术网
  • javascript/
  • Javascript 更改页面上导航栏的颜色

Javascript 更改页面上导航栏的颜色

javascript html css angularjs ionic-framework

Javascript 更改页面上导航栏的颜色,javascript,html,css,angularjs,ionic-framework,Javascript,Html,Css,Angularjs,Ionic Framework,嗨，我想在每次页面加载时更改导航栏的颜色，所以我尝试了以下方法： 在menu.html中： <ion-side-menus enable-menu-with-back-views="false"> <ion-side-menu-content> <ion-nav-bar class="{{headerClass}}"> <ion-nav-buttons side="left"> <but

嗨，我想在每次页面加载时更改导航栏的颜色，所以我尝试了以下方法： 在menu.html中：

<ion-side-menus enable-menu-with-back-views="false">

<ion-side-menu-content>

    <ion-nav-bar class="{{headerClass}}">

        <ion-nav-buttons side="left">

            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>

        </ion-nav-buttons>

    </ion-nav-bar>

    <ion-nav-view name="side-menu21"></ion-nav-view>

</ion-side-menu-content>

<ion-side-menu side="left">

    <ion-header-bar class="bar-dark">

        <div class="title">Menu</div>

    </ion-header-bar>

    <ion-content padding="false" class="side-menu-left has-header">

        <ion-list>

            <ion-item ui-sref="menu.home" menu-close="" class="item-icon-left"><i class="icon ion-home assertive"></i>Persée</ion-item>

            <ion-item ui-sref="menu.offreSFR" menu-close="" class="item-icon-left"><i class="icon ion-ios-cart royal"></i>Offres SFR</ion-item>

            <ion-item ui-sref="menu.mediatheque" menu-close="" class="item-icon-left"><i class="icon ion-ios-book energized"></i>Mediatheque</ion-item>

            <ion-item ui-sref="menu.reporting" menu-close="" class="item-icon-left"><i class="icon ion-stats-bars balanced"></i>Reporting</ion-item>

            <ion-item ui-sref="menu.FAQ" menu-close="" class="item-icon-left"><i class="icon ion-help calm"></i>FAQ</ion-item>

            <ion-item ui-sref="connexion" menu-close="" class="item-icon-left"><i class="icon ion-log-out"></i>Se deconnecter</ion-item>

        </ion-list>

    </ion-content>

</ion-side-menu>
谢谢

您可以在每次页面更改时更改导航栏的标题栏颜色

.run(function($rootScope, $location) {

    $rootScope.$on('$locationChangeStart', function(event, next, current) {

        if ($location.path() == '/menu/home') {
            $rootScope.headerClass = 'bar-assertive';
        } else if ($location.path() == '/menu/reporting') {
            $rootScope.headerClass = 'bar-balanced';
        } else if ($location.path() == '/menu/mediatheque') {
            $rootScope.headerClass = 'bar-energized';
        } else if ($location.path() == '/menu/offreSFR') {
            $rootScope.headerClass = 'bar-royal';
        } else if ($location.path() == '/menu/FAQ') {
            $rootScope.headerClass = 'bar-calm';
        }else{
           $rootScope.headerClass = 'bar-assertive';
        }
    });    

})

或您可以在每个
视图中添加
ion导航条

menu.html


<ion-side-menus enable-menu-with-back-views="false">
    <ion-side-menu-content>        
        <ion-nav-view name="menu"></ion-nav-view>
    </ion-side-menu-content>
    <ion-side-menu side="left">
        <ion-header-bar class="bar-dark">
            <div class="title">Menu</div>
        </ion-header-bar>
        <ion-content padding="false" class="side-menu-left has-header">
            <ion-list>
                <ion-item ui-sref="menu.home" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-home assertive"></i>Persée</ion-item>
                <ion-item ui-sref="menu.offreSFR" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-ios-cart royal"></i>Offres SFR</ion-item>
                <ion-item ui-sref="menu.mediatheque" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-ios-book energized"></i>Mediatheque</ion-item>
                <ion-item ui-sref="menu.reporting" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-stats-bars balanced"></i>Reporting</ion-item>
                <ion-item ui-sref="menu.FAQ" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-help calm"></i>FAQ</ion-item>
                <ion-item ui-sref="connexion" menu-close="" class="item-icon-left bar-dark"><i class="icon ion-log-out"></i>Se deconnecter</ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>



<ion-view title="Persée" cache-view="false">
    <ion-nav-bar class="bar-assertive">
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>



<ion-view title="Reporting">
    <ion-nav-bar class="bar-balanced">
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>



<ion-view title="Mediatheque">
    <ion-nav-bar class="bar-energized">
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>



<ion-view title="Offre SFR" cache-view="false">
    <ion-nav-bar class="bar-royal">
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>



<ion-view view-title="FAQ">
    <ion-nav-bar class="bar-calm">
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>




菜单
佩雷
高级财务主任
中世纪
报告
常见问题
硒解连接器


home.html


<ion-side-menus enable-menu-with-back-views="false">
    <ion-side-menu-content>        
        <ion-nav-view name="menu"></ion-nav-view>
    </ion-side-menu-content>
    <ion-side-menu side="left">
        <ion-header-bar class="bar-dark">
            <div class="title">Menu</div>
        </ion-header-bar>
        <ion-content padding="false" class="side-menu-left has-header">
            <ion-list>
                <ion-item ui-sref="menu.home" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-home assertive"></i>Persée</ion-item>
                <ion-item ui-sref="menu.offreSFR" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-ios-cart royal"></i>Offres SFR</ion-item>
                <ion-item ui-sref="menu.mediatheque" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-ios-book energized"></i>Mediatheque</ion-item>
                <ion-item ui-sref="menu.reporting" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-stats-bars balanced"></i>Reporting</ion-item>
                <ion-item ui-sref="menu.FAQ" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-help calm"></i>FAQ</ion-item>
                <ion-item ui-sref="connexion" menu-close="" class="item-icon-left bar-dark"><i class="icon ion-log-out"></i>Se deconnecter</ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>



<ion-view title="Persée" cache-view="false">
    <ion-nav-bar class="bar-assertive">
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>



<ion-view title="Reporting">
    <ion-nav-bar class="bar-balanced">
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>



<ion-view title="Mediatheque">
    <ion-nav-bar class="bar-energized">
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>



<ion-view title="Offre SFR" cache-view="false">
    <ion-nav-bar class="bar-royal">
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>



<ion-view view-title="FAQ">
    <ion-nav-bar class="bar-calm">
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>






reperting.html


<ion-side-menus enable-menu-with-back-views="false">
    <ion-side-menu-content>        
        <ion-nav-view name="menu"></ion-nav-view>
    </ion-side-menu-content>
    <ion-side-menu side="left">
        <ion-header-bar class="bar-dark">
            <div class="title">Menu</div>
        </ion-header-bar>
        <ion-content padding="false" class="side-menu-left has-header">
            <ion-list>
                <ion-item ui-sref="menu.home" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-home assertive"></i>Persée</ion-item>
                <ion-item ui-sref="menu.offreSFR" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-ios-cart royal"></i>Offres SFR</ion-item>
                <ion-item ui-sref="menu.mediatheque" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-ios-book energized"></i>Mediatheque</ion-item>
                <ion-item ui-sref="menu.reporting" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-stats-bars balanced"></i>Reporting</ion-item>
                <ion-item ui-sref="menu.FAQ" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-help calm"></i>FAQ</ion-item>
                <ion-item ui-sref="connexion" menu-close="" class="item-icon-left bar-dark"><i class="icon ion-log-out"></i>Se deconnecter</ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>



<ion-view title="Persée" cache-view="false">
    <ion-nav-bar class="bar-assertive">
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>



<ion-view title="Reporting">
    <ion-nav-bar class="bar-balanced">
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>



<ion-view title="Mediatheque">
    <ion-nav-bar class="bar-energized">
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>



<ion-view title="Offre SFR" cache-view="false">
    <ion-nav-bar class="bar-royal">
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>



<ion-view view-title="FAQ">
    <ion-nav-bar class="bar-calm">
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>






mediatheque.html


<ion-side-menus enable-menu-with-back-views="false">
    <ion-side-menu-content>        
        <ion-nav-view name="menu"></ion-nav-view>
    </ion-side-menu-content>
    <ion-side-menu side="left">
        <ion-header-bar class="bar-dark">
            <div class="title">Menu</div>
        </ion-header-bar>
        <ion-content padding="false" class="side-menu-left has-header">
            <ion-list>
                <ion-item ui-sref="menu.home" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-home assertive"></i>Persée</ion-item>
                <ion-item ui-sref="menu.offreSFR" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-ios-cart royal"></i>Offres SFR</ion-item>
                <ion-item ui-sref="menu.mediatheque" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-ios-book energized"></i>Mediatheque</ion-item>
                <ion-item ui-sref="menu.reporting" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-stats-bars balanced"></i>Reporting</ion-item>
                <ion-item ui-sref="menu.FAQ" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-help calm"></i>FAQ</ion-item>
                <ion-item ui-sref="connexion" menu-close="" class="item-icon-left bar-dark"><i class="icon ion-log-out"></i>Se deconnecter</ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>



<ion-view title="Persée" cache-view="false">
    <ion-nav-bar class="bar-assertive">
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>



<ion-view title="Reporting">
    <ion-nav-bar class="bar-balanced">
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>



<ion-view title="Mediatheque">
    <ion-nav-bar class="bar-energized">
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>



<ion-view title="Offre SFR" cache-view="false">
    <ion-nav-bar class="bar-royal">
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>



<ion-view view-title="FAQ">
    <ion-nav-bar class="bar-calm">
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>






offreSFR.html


<ion-side-menus enable-menu-with-back-views="false">
    <ion-side-menu-content>        
        <ion-nav-view name="menu"></ion-nav-view>
    </ion-side-menu-content>
    <ion-side-menu side="left">
        <ion-header-bar class="bar-dark">
            <div class="title">Menu</div>
        </ion-header-bar>
        <ion-content padding="false" class="side-menu-left has-header">
            <ion-list>
                <ion-item ui-sref="menu.home" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-home assertive"></i>Persée</ion-item>
                <ion-item ui-sref="menu.offreSFR" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-ios-cart royal"></i>Offres SFR</ion-item>
                <ion-item ui-sref="menu.mediatheque" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-ios-book energized"></i>Mediatheque</ion-item>
                <ion-item ui-sref="menu.reporting" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-stats-bars balanced"></i>Reporting</ion-item>
                <ion-item ui-sref="menu.FAQ" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-help calm"></i>FAQ</ion-item>
                <ion-item ui-sref="connexion" menu-close="" class="item-icon-left bar-dark"><i class="icon ion-log-out"></i>Se deconnecter</ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>



<ion-view title="Persée" cache-view="false">
    <ion-nav-bar class="bar-assertive">
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>



<ion-view title="Reporting">
    <ion-nav-bar class="bar-balanced">
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>



<ion-view title="Mediatheque">
    <ion-nav-bar class="bar-energized">
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>



<ion-view title="Offre SFR" cache-view="false">
    <ion-nav-bar class="bar-royal">
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>



<ion-view view-title="FAQ">
    <ion-nav-bar class="bar-calm">
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>






FAQ.html


<ion-side-menus enable-menu-with-back-views="false">
    <ion-side-menu-content>        
        <ion-nav-view name="menu"></ion-nav-view>
    </ion-side-menu-content>
    <ion-side-menu side="left">
        <ion-header-bar class="bar-dark">
            <div class="title">Menu</div>
        </ion-header-bar>
        <ion-content padding="false" class="side-menu-left has-header">
            <ion-list>
                <ion-item ui-sref="menu.home" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-home assertive"></i>Persée</ion-item>
                <ion-item ui-sref="menu.offreSFR" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-ios-cart royal"></i>Offres SFR</ion-item>
                <ion-item ui-sref="menu.mediatheque" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-ios-book energized"></i>Mediatheque</ion-item>
                <ion-item ui-sref="menu.reporting" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-stats-bars balanced"></i>Reporting</ion-item>
                <ion-item ui-sref="menu.FAQ" menu-close="" class="item-icon-left" ng-click="reloadRoute()"><i class="icon ion-help calm"></i>FAQ</ion-item>
                <ion-item ui-sref="connexion" menu-close="" class="item-icon-left bar-dark"><i class="icon ion-log-out"></i>Se deconnecter</ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>



<ion-view title="Persée" cache-view="false">
    <ion-nav-bar class="bar-assertive">
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>



<ion-view title="Reporting">
    <ion-nav-bar class="bar-balanced">
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>



<ion-view title="Mediatheque">
    <ion-nav-bar class="bar-energized">
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>



<ion-view title="Offre SFR" cache-view="false">
    <ion-nav-bar class="bar-royal">
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>



<ion-view view-title="FAQ">
    <ion-nav-bar class="bar-calm">
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
    </ion-nav-bar>
    <ion-content overflow-scroll="true" padding="true" class="has-header"></ion-content>
</ion-view>



谢谢Ved，它几乎可以正常工作，我需要刷新页面才能正常工作，是否有一个事件允许我自己不刷新页面？