单页应用，permalinks和ngView？
这是我当前的设置，每个列都由一个控制器表示：
<navbar></navbar>
[column1] [column2] [column3]
<footer></footer>此外，每一列都有一些信息(一个或多个变量和对象)，当修改这些信息时，需要传播到它的邻居。
目前，我通过使用工厂并将其注入相关控制器来共享这些变量。
现在我要使用permalink变量值，例如：
http://localhost/column1/vars?var1=2&var2='hi'
/column2/ls1=%7B%27c%27%3A+1%2C+%27f%27%3A+%27b%27%7D
/column3/...这也应该允许我拆除我的工厂。
实现这一设置的最佳方法是什么，例如：ngView**s 是答案吗？**
回答 2
Stack Overflow用户
发布于 2013-06-04 21:46:58
您可以使用角度ui团队ui路由器(https://github.com/angular-ui/ui-router)来跟踪什么是有效的可选参数集。要做到这一点，您的代码应该如下所示：
<!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="angular.js@1.0.x" 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>使用状态提供程序设置可以接受以下可选参数：
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);
})上述工作柱塞：http://plnkr.co/edit/ZVLApU92MVdIhlovailY?p=preview
请注意，ui-路由器还允许使用点表示法来嵌套状态，这样您就可以使用相同的机制跟踪页面的子参数(参见https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views)。
Stack Overflow用户
发布于 2014-01-21 10:28:43
我不太明白这里的要求.
一件事是在控制器之间共享参数.但我不确定我完全理解你的网址..。
我最好奇的是"Column1，Column2和Column3“在url中的存在？有什么需要吗？
下面是一个小小的思考者，看看我是否已经接近理解了这个想法的一部分：- http://plnkr.co/edit/ZkaANVq5tCdLKWqHFa16?p=preview
(使用https://github.com/dotJEM/angular-routing)
它只会将所有变量传播到同一“状态”的链接中.
注意:我选择了比Angulars ngRoute模块更高级的路由解决方案，但实际上，对于这个用例，我认为您不需要比基本路由器更高级的.但它是ofc的。如果突然发现自己需要嵌套视图、过滤参数等功能，那么您就不必在以后更改。
https://stackoverflow.com/questions/16925678
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号