基于 Ionic 上的 $stateParams 参数隐藏 DOM 上的元素

Question

我正在构建一个包含三个选项卡的应用：主页、个人资料和设置。

在 "Home" 选项卡中有一个项目列表。当我单击某个项目时，我会进入该项目的 "Detail" 部分，其中有一些按钮和其他控件。

本质上，"Profile" 选项卡正是上述 "Detail" 部分，但没有此类控件。所以，我试图做的是配置如下状态（我将只显示相关的）：

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

在 asset-detail.html 中，当 readOnly 标志设置为 true 时，我在要隐藏的元素上放置了一些 ng-hide。例如：

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

问题是，我用 readOnly=true 或 readOnly=false 调用该页面，它隐藏了所有组件。在我的 AssetDetailCtrl 中我有：

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

而且每次我用不同的 $stateParams 调用页面时，我都可以看到 readOnly 具有正确的值，但它对 DOM.

没有影响

我能做什么？

谢谢

Answer 1

$stateParams 参数总是字符串。 "true" == true，还有"false" == true。您需要以某种方式将值强制转换为布尔值。

在控制器中：readOnly: !!$stateParams.readOnly，
或视图 ng-hide="model.readOnly === 'true'" - 注意 'true'

基于 Ionic 上的 $stateParams 参数隐藏 DOM 上的元素

Hide elements on DOM based on $stateParams param on Ionic

angularjs

ng-show

angular-ui-router

ionic-framework

ng-hide