Hide elements on DOM based on $stateParams value

ionic-v1
1

Hello,

I’m trying to build an app with three tabs: Home, Profile and Settings.

In the “Home” tab there is a list of items. When I click on an item, I enter into a “Detail” section of that item where there are some buttons and other controls.

Essentially, the “Profile” tab is exactly the “Detail” section aforementioned but without such controls. So, what I tried to do is to configure the states like the following (I’ll show only the relevant ones):

	.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'
		}
	  }
	})

In the asset-detail.html I put some ng-hide(s) on the elements I want to hide when readOnly flag is set to true. For example:

<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>

The problem is that, either I call that page with readOnly=true or readOnly=false, it hides all the components. In my AssetDetailCtrl I have:

$scope.assetId = $stateParams.assetId;
	$scope.model = {
		assetDetail: '',
		lyncAvailable: true,
		readOnly: $stateParams.readOnly
}
		
console.log("READ_ONLY", $scope.model.readOnly);

And I can see that readOnly has the correct value every time I call the page with different $stateParams, but on the template asset-detail.html it has no effect.

What can I do?

Thanks