不会动态更改侧菜单标题中的颜色

Question

我需要侧边菜单，所以我在我的项目中使用了侧边菜单模板。我正在尝试在标题中使用动态颜色。我已经获得了在内容中相应更改的颜色，但我也需要在标题中更改它。我尝试不使用侧面菜单模板。当我将 ion-header 放在显示我的内容的同一页面中时，标题颜色会发生变化，但侧面菜单不起作用。有什么机制可以做到这一点？？

应用控制器

.state('sidemenu',{
        url:'/sidemenu',
        abstract:true,
        templateUrl:'templates/sidemenu.html'
      })


      //id is passed as the parameter
      .state('sidemenu.chapters',{
        url:'/chapters/:id',
        views:{
          'menuContent':{
            templateUrl:'templates/chapters.html',
            controller: 'ChaptersCtrl'
          }
        }
      })

在我的ChaptersCtrl 中，我有更改颜色所需的值，但我不能在sidemenu.html 中使用它。

sidemenu.html

<ion-side-menus enable-menu-with-back-views="false">
    <ion-side-menu-content drag-content="false">
      <ion-nav-bar class="dark header header-height">
        <ion-nav-back-button>
        </ion-nav-back-button>

        <ion-nav-buttons side="left">
          <button class="button button-dark button-icon button-clear ion-navicon" menu-toggle="left">
          </button>
        </ion-nav-buttons>
      </ion-nav-bar>
      <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-content class="has-header">
      <ion-list>
        <ion-item menu-close class="item item-icon-left" href="#/content">
          <i class="icon ion-bookmark"></i>
          Table of Content
        </ion-item>

      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

Answer 1

您可以通过使用$rootScope 和ng-class 来实现此目的。

$rootScope 与$scope 的工作方式相同，除了变量将在整个应用程序中可用。当您进入某个页面时，您可以使用它在变量中设置类名。假设$rootScope.headClass = "mycustomclass"。

之后，您可以将ng-class 参数添加到您的侧边菜单标题中。 ng-class 确保将您的字符串转换为类。因此，您可以将 ng-class = "{{headClass}}" 添加到侧面菜单中的 ion-header。

Answer 2

我不知道它是否很棒，但我已经这样做了：

if (counter == 10) { $rootScope.final = 'color:red;'; }

<button class="button button-counter"> <span style="{{final}}">{{timer}}</span> </button>