Показать части страницы с помощью ng-show, например, на сайте virginamerica
В моем проекте я должен сделать что-то очень похожее на логику virginamerica.com ux. Я должен установить свою страницу на 3 части, и сделать их видимыми в зависимости от routeParams. Итак, представьте себе это:
- Список предметов [виден в корне]
- Деталь предмета с некоторыми вариациями [видна в корне / предмете]
- Страница редактора элементов [видимая в корне /item/var]
Я пытаюсь настроить угловое приложение для этого, но у меня есть некоторые проблемы, я делаю что-то вроде этого:
- в моем index.html у меня есть этот код:
<!DOCTYPE html>
<html ng-app="box">
<head lang="en">
<meta charset="utf-8">
<title>Box loader</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="box.js"></script>
<!-- <base href="/"> -->
</head>
<body ng-controller="boxCtrl">
<section id="box-chooser">
<ul>
<li ng-repeat="box in boxes">
<a href="#/{{box.boxid}}">{{box.boxname}}</a>
</li>
</ul>
</section>
<div ng-show="detailVisible">
<section ng-controller="boxDetailCtrl">
<h1>detail {{boxcode}}</h1>
</section>
</div>
</body>
</html>- это часть angularjs:
var app = angular.module('box', []);
app.config(function($routeProvider /*$locationProvider*/) {
$routeProvider
.when('/', {} )
.when('/:boxid', {
})
//$locationProvider.html5Mode(true);
});
app.controller('boxCtrl', function($scope, $route, $location) {
$scope.$on('$routeChangeSuccess', function() {
var path = $location.path();
console.log(path);
$scope.detailVisible = false;
if(path === '/123') {
$scope.detailVisible= true;
}
});
$scope.boxes = [{'boxid':'123', 'boxname': 'name1'}, {'boxid':'189', 'boxname': 'name2'}, {'boxid':'156', 'boxname': 'name3'}]
});
app.controller('boxDetailCtrl', function($scope, $route, $location){
$scope.boxcode = $location.path();
console.log('secondo:' + $location.path())
});Проблема в том, что boxcode на втором контроллере работает только после обновления страницы на localhost/#/123, а ng-show работает на изменение пути.
Есть ли лучшая идея сделать это? Заранее спасибо:)