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

在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 param隐藏DOM上的元素

1 个答案: