Форум Сайтостроение Веб-строительство

Как правильно отобразить контент в активной категории?

S
На сайте с 13.11.2012
Offline
72
Smirnof
255

Есть код, который отображает разные блоки section flex-fluid-container для разных категорий.

Мне нужно, чтобы только в активной категории settings отображался section с id="admin", section без id="admin" скрывался и наоборот.

<div class="categories-list">
<div class="category" ui-sref=".trash" ui-sref-active="open" ed-trash-droppable><i class="icon icon-trash"></i> <span class="text">{{:: 'trash' | translate }}</span></div>
<div class="category" ui-sref=".recent" ui-sref-active="open"><i class="icon icon-clock"></i> <span class="text">{{:: 'recent' | translate }}</span></div>
<div class="category" ui-sref=".favorites" ui-sref-active="open"><i class="icon icon-star-filled"></i> <span class="text">{{:: 'favorites' | translate }}</span></div>
<div class="category" ui-sref=".settings" ui-sref-active="open"><i class="icon icon-cog"></i> <span class="text">{{:: 'settings' | translate }}</span></div>
</div>

<div class="ad-container" ng-if="ad1" ng-bind-html="ad1"></div>

<space-usage></space-usage>
</section>

<section id="middle-col">
<section class="flex-fluid-container">
<div class="middle-col-flex flex-fluid" ng-controller="ItemsController" ng-file-drop drag-over-class="dragover" ng-file-change="upload($files)" ng-multiple="true" allow-dir="true">

<div class="sub-nav">
<ul class="list-unstyled list-inline folder-path">
<li ng-click="folders.open(folder)" ng-class="{ selected: folders.selected.name === folder }" ng-repeat="folder in folders.selected.path.split('/')">
<i class="icon icon-folder"></i> {{folder}}
</li>
</ul>
<div class="action-buttons">
<md-button ng-if=":: isSmallScreen" class="left-col-toggler">{{:: 'Folders' | translate }} <i class="icon icon-folder"></i></md-button>
<md-button id="more-options" ed-more-options-menu ng-disabled="!selectedItems.getLength()">{{:: 'actions' | translate }} <i class="icon icon-ellipsis-vert"></i></md-button>
<div class="dropdown">
<md-button data-toggle="dropdown">{{:: 'sort' | translate }} <i class="icon icon-sort-name-up"></i></md-button>
<ul class="dropdown-menu" role="menu">
<li ng-click="changeOrder('name')" ng-class="{ selected: order.prop == 'name' }"><a href="" translate>name</a></li>
<li ng-click="changeOrder('-file_size')" ng-class="{ selected: order.prop == '-file_size' }"><a href="" translate>sizeBigFirst</a></li>
<li ng-click="changeOrder('file_size')" ng-class="{ selected: order.prop == 'file_size' }"><a href="" translate>sizeSmallFirst</a></li>
<li ng-click="changeOrder('-created_at')" ng-class="{ selected: order.prop == '-created_at' }"><a href="" translate>dateUploaded</a></li>
</ul>
</div>
<md-button ng-click="toggleSelectedView()">{{:: 'view' | translate }} <i ng-class="selectedView === 'grid' ? 'icon-th' : 'icon-th-large'" class="icon"></i></md-button>
<md-button ed-toggle-info-panel ng-class="{ active: rightPanel.open }">{{:: 'activity' | translate }} <i class="icon icon-info-circled"></i></md-button>
</div>
</div>

<div class="ad-container" ng-if="ad2" ng-bind-html="ad2"></div>

<div ui-view class="files-view" afkl-image-container items-selectable infinite-scroll="paginateFiles()"></div>
<div id="files-spinner" ng-if="ajaxProgress.files"><md-progress-circular md-mode="indeterminate"></md-progress-circular></div>
</div>
</section>


<section class="flex-fluid-container" id="admin">
<div class="flex-fluid" ui-view></div>
</section>


</section>

Все перепробовал

Контент дублируется из-за ui-view

Мне понравилось оформление страницы из панели управления, переношу ее на панель пользователя, слетают стили и дублируется контент во всех 4 вкладках...

Помогите, пожалуйста.

Страница начинается с

<body ng-app="app">

<div id="splash" ng-cloak>
<div id="splash-spinner"></div>
</div>

<div ng-cloak style="height: 100%" ng-controller="RootController">
<div id="main-view" ui-view></div>
</div>

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий