Ответ 1
Основываясь на наших предыдущих обсуждениях, я хочу дать вам некоторое представление о том, как использовать UI-Router здесь. Я считаю, что я правильно понимаю ваш вызов... рабочий пример. Если это не полностью подходит, пожалуйста, возьмите его как вдохновение
ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: С плункером я не смог этого добиться: http://m.amsterdamfoodie.nl/, но принцип должен быть в том, что пример аналогичный
Итак, существует определение состояния (у нас есть только два состояния)
$stateProvider
.state('main', {
url: '/',
views: {
'@' : {
templateUrl: 'tpl.layout.html',
controller: 'MainCtrl',
},
'[email protected]' : { templateUrl: 'tpl.right.html',},
'[email protected]' : {
templateUrl: 'tpl.map.html',
controller: 'MapCtrl',
},
'[email protected]' : {
templateUrl: 'tpl.list.html',
controller: 'ListCtrl',
},
},
})
.state('main.criteria', {
url: '^/criteria/:criteria/:value',
views: {
'map' : {
templateUrl: 'tpl.map.html',
controller: 'MapCtrl',
},
'list' : {
templateUrl: 'tpl.list.html',
controller: 'ListCtrl',
},
},
})
}];
Это будет наш основной tpl.layout.html
<div>
<section class="main">
<section class="map">
<div ui-view="map"></div>
</section>
<section class="list">
<div ui-view="list"></div>
</section>
</section>
<section class="right">
<div ui-view="right"></div>
</section>
</div>
Как мы видим, основное состояние задает эти вложенные представления основного состояния: 'viewName @main', например. '[email protected]'
Также subview, main.criteria вставляет в представления макет.
Его url начинается со знака ^ (url : '^/criteria/:criteria/:value'), что позволяет иметь / косую черту для основной, а не двойной косой черты для дочернего
А также есть контроллеры, они здесь немного наивные, но они должны показать, что на фоне может быть реальная загрузка данных (на основе критериев).
Наиболее важным здесь является то, что PARENT MainCtrl создает $scope.Model = {}. Это свойство будет (благодаря наследованию) разделяться между родителями и детьми. Вот почему все это будет работать:
app.controller('MainCtrl', function($scope)
{
$scope.Model = {};
$scope.Model.data = ['Rest1', 'Rest2', 'Rest3', 'Rest4', 'Rest5'];
$scope.Model.randOrd = function (){ return (Math.round(Math.random())-0.5); };
})
.controller('ListCtrl', function($scope, $stateParams)
{
$scope.Model.list = []
$scope.Model.data
.sort( $scope.Model.randOrd )
.forEach(function(i) {$scope.Model.list.push(i + " - " + $stateParams.value || "root")})
$scope.Model.selected = $scope.Model.list[0];
$scope.Model.select = function(index){
$scope.Model.selected = $scope.Model.list[index];
}
})
Это должно понять, как мы можем использовать функции, предоставляемые нами с помощью UI-Router:
- Абсолютные маршруты (^)
- Наследование наследования только по иерархии просмотров
- Показать имена - Относительные и абсолютные имена
Проверьте приведенный выше экстракт здесь, в рабочий пример
Расширить: новый plunker здесь
Если мы не хотим, чтобы отображение карты было воссоздано, мы можем просто опустить эту форму в дочернее состояние def:
.state('main.criteria', {
url: '^/criteria/:criteria/:value',
views: {
// 'map' : {
// templateUrl: 'tpl.map.html',
// controller: 'MapCtrl',
//},
'list' : {
templateUrl: 'tpl.list.html',
controller: 'ListCtrl',
},
},
})
Теперь наша карта VIEW будет просто получать изменения в модели (может быть просмотрена), но просмотр и контроллер не будут перезагружены
ТАКЖЕ, есть еще один plunker http://plnkr.co/edit/y0GzHv?p=preview, который использует controllerAs
.state('main', {
url: '/',
views: {
'@' : {
templateUrl: 'tpl.layout.html',
controller: 'MainCtrl',
controllerAs: 'main', // here
},
...
},
})
.state('main.criteria', {
url: '^/criteria/:criteria/:value',
views: {
'list' : {
templateUrl: 'tpl.list.html',
controller: 'ListCtrl',
controllerAs: 'list', // here
},
},
})
и это можно использовать следующим образом:
<h4>{{main.hello()}}</h4>
<h4>{{list.hello()}}</h4>
Последний плункер здесь