Question

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

app控制器

.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}}"添加到您的离子标题中。

Answer 2

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

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

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

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

2 个答案: