Для этого вы можете использовать ui-router (https://github.com/angular-ui/ui-router) с угловыми ui для отслеживания того, что эффективно представляет собой набор необязательных параметров. Для того, чтобы сделать этот код будет выглядеть примерно так:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="[email protected]" src="http://code.angularjs.org/1.0.7/angular.min.js" data-semver="1.0.7"></script>
<script src="angular-ui-states.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<ul>
<li><a href="" ng-click="transition('foo', {var1: 'hello', var2: 'world'})">Go to Foo</a></li>
<li><a ng-href="#/bar?var1={{bazVars.var1}}&var2={{bazVars.var2}}">Go to Bar</a></li>
<li><a href="" ng-click="transitionLocation('baz', {var1: 'sionara', var2: 'world', var3: 'meh'})">Go to Baz</a></li>
<li><a href="#/bah">Go to Bah</a></li>
</ul>
<div ui-view></div>
<pre>
{{$stateParams}}
</pre>
</body>
</html>
с установкой stateprovider принять эти необязательные параметры:
var app = angular.module('plunker', ['ui.state'])
.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('foo',
{
url: '/foo?var1&var2',
template: '<h1>Foo</h1>',
controller: 'subCtrl'
})
.state('bar',
{
url: '/bar?var1&var2',
template: '<h1>Bar</h1>',
controller: 'subCtrl'
})
.state('baz',
{
url: '/baz?var1&var2&var3',
template: '<h1>Baz</h1>',
controller: 'subCtrl'
})
.state('bah',
{
url: '/bah?var1&var2&var3',
template: '<h1>Bah</h1>',
controller: 'subCtrl'
});
}])
.run(['$stateParams', '$rootScope', function($stateParams, $rootScope){
$rootScope.$stateParams = $stateParams
}]);
app.controller('MainCtrl', function($scope, $state, $location) {
$scope.bazVars = {
var1: 'goodbye',
var2: 'world'
}
$scope.transition = function(name, options){
$state.transitionTo(name, options);
}
$scope.transitionLocation = function(name, options){
$location.path('/' + name);
for(key in options){
$location.search(key, options[key]);
}
console.log($location.url());
}
});
app.controller('subCtrl', function($scope, $stateParams){
console.log($stateParams);
})
Работа plunker указанного выше: http://plnkr.co/edit/ZVLApU92MVdIhlovailY?p=preview
Обратите внимание, что пользовательский интерфейс-маршрутизатор позволяет вложенным состояниям также использовать точечную нотацию, чтобы вы могли отслеживать вспомогательные параметры вашей страницы с помощью этого же механизма (см. https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views).
Означает ли эта информация постоянная ссылка или может ли она жить в контроллере это родительский элемент для вкладок? –
Желательно, чтобы постоянная ссылка, поскольку настраиваемая информация (и поисковые запросы) должна быть заклассифицирована. Есть проблемы с длиной URL-адресов, которые могут возникнуть в результате использования cookie или LocalStorage; но желательно, чтобы длина URL была достаточно длинной для моих целей. – stackoverflowuser95
Эти параметры известны заранее или вы создаете их на лету? Я прошу, потому что есть некоторые ограничения для необязательных параметров (материал после?) В угловом маршрутизаторе. –