0

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

在“主页”选项卡中有一个项目列表。当我单击一个项目时，我会进入该项目的“详细信息”部分，其中有一些按钮和其他控件。

本质上，“配置文件”选项卡正是前面提到的“详细信息”部分，但没有此类控件。所以，我试图做的是配置如下状态（我将只显示相关的状态）：

 .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 没有影响。

我能做些什么？

谢谢

4

1 回答 1

1

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

  1. 在控制器中：readOnly: !!$stateParams.readOnly，
  2. 或在视图中ng-hide="model.readOnly === 'true'"-注意引号'true'
于 2015-10-15T19:34:51.127 回答