gpt4 book ai didi

data-binding - 单页应用程序、永久链接和 ngView?

转载 作者:行者123 更新时间:2023-12-04 05:18:05 25 4
gpt4 key购买 nike

这是我当前的设置,每一列都由一个 Controller 表示:

<navbar></navbar>
[column1] [column2] [column3]
<footer></footer>

此外,每一列都有一些信息(一个或多个变量和对象),这些信息在修改后需要传播到其相邻列。

目前,我通过使用工厂并将其注入(inject)相关 Controller 来共享这些变量。

现在我想永久链接变量值,例如:

http://localhost/column1/vars?var1=2&var2='hi'
/column2/ls1=%7B%27c%27%3A+1%2C+%27f%27%3A+%27b%27%7D
/column3/...

这也应该允许我删除我的工厂。

实现此设置的最佳方法是什么,例如:ngView 是答案吗?

最佳答案

为此,您可以使用 angular-ui 团队的 ui-router ( 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>

使用 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

请注意,ui-router 也允许使用点符号的嵌套状态,因此您可以使用相同的机制跟踪页面的子参数(参见 https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views)。

关于data-binding - 单页应用程序、永久链接和 ngView?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16925678/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com