Скрыть элементы в DOM на основе $ stateParams param на Ionic

Question

Я создаю приложение с тремя вкладками: «Главная», «Профиль» и «Настройки».

На вкладке «Главная» есть список предметов. Когда я нажимаю на элемент, я вхожу в раздел «Подробный» этого элемента, где есть несколько кнопок и другие элементы управления.

По существу, вкладка «Профиль» представляет собой раздел «Подробный», указанный выше, но без таких элементов управления. Итак, что я пытался сделать, это настроить состояния, как следующее (я покажу только важные из них):

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

     .state('tab.home', { 
     url: '/home', 
     views: { 
      'tab-home': { 
      templateUrl: 'templates/tabs/tab-home.html', 
      controller: 'HomeCtrl' 
      } 
     } 
     }) 

     .state('tab.assetdetail', { 
      url: '/asset/:assetId/:readOnly', 
      views: { 
       'tab-home': { 
        templateUrl: 'templates/tabs/asset-detail.html', 
        controller: 'AssetDetailCtrl' 
       } 
      } 
     }) 

     .state('tab.profile', { 
      url: '/profile/:assetId/:readOnly', 
      views: { 
      'tab-profile': { 
       templateUrl: 'templates/tabs/asset-detail.html', 
       controller: 'AssetDetailCtrl' 
      } 
      } 
     }) 

В актив-detail.html я ставлю некоторые нг скрытие (ы) на элементы, которые я хочу скрыть, когда флаг readOnly установлен в true. Например:

<div ng-hide="model.readOnly" class="row"> 
     <div class="col col-10"> 
      <label class="checkbox"> 
       <input type="checkbox"> 
      </label> 
     </div> 
     <div class="col col-33 col-center"> 
      <span>{{ 'addToFav' | translate }}</span> 
     </div> 
     <div class="col col-10"> 
      <label class="checkbox"> 
       <input type="checkbox"> 
      </label> 
     </div> 
     <div class="col col-33 col-center"> 
      <span>{{ 'addToContacts' | translate }}</span> 
     </div> 
    </div> 

Проблема заключается в том, что, как я называю эту страницу с = истина доступен только для чтения или доступен только для чтения = ложь, она скрывает все компоненты. В моей AssetDetailCtrl у меня есть:

$scope.assetId = $stateParams.assetId; 
    $scope.model = { 
     assetDetail: '', 
     lyncAvailable: true, 
     readOnly: $stateParams.readOnly 
} 

И я могу видеть, что имеет доступно только для чтения правильного значения каждый раз, когда я называю страницу с различным stateParams $, но это не имеет никакого влияния на DOM.

Что я могу сделать?

Благодаря

Answer 1

$stateParams PARAMS всегда цепочки. "true" == true, но также "false" == true. Вам нужно как-то усилить значение для boolean.

1. в контроллере: readOnly: !!$stateParams.readOnly,
2. или ввиду ng-hide="model.readOnly === 'true'" - примечание цитирует вокруг 'true'