Question

这是我当前的设置，每列由控制器代表：

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

此外，每列都有一些信息（一个或多个变量和对象），这些信息在修改后需要传播到其邻居。

目前，我通过使用工厂并将其注入相关控制器来共享这些变量。

现在我想永久化变量值，例如：

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

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

实现此设置的最佳方法是什么，例如：ngView是答案吗？

Answer 1

您可以使用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);
})

上述工作人员：http://plnkr.co/edit/ZVLApU92MVdIhlovailY?p=preview

请注意，ui-router也允许使用点表示法来嵌套状态，因此您可以使用相同的机制跟踪页面的子参数（请参阅https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views）。

Answer 2

不确定我是否理解这里的要求......

有一件事是共享参数并在控制器之间共享它们......但我不确定我是否完全理解您的URL ...

我最感兴趣的是网址中是否存在“Column1，Column2和Column3”？对那些人有什么需要？...

这是一个小小的傻瓜，看看我是否已经接近理解这个想法的一部分： - http://plnkr.co/edit/ZkaANVq5tCdLKWqHFa16?p=preview

（使用https://github.com/dotJEM/angular-routing）

它实际上只是将所有变量传播到相同“状态”的链接......

注意：我选择比Angulars ngRoute模块更高级的路由解决方案，但实际上，对于这个用例，我认为你不需要比基本路由器更先进的东西......但它确实如此。如果您突然发现自己需要嵌套视图，过滤参数的能力等，那么您将不必在以后更改。

单页应用，永久链接和ngView？

2 个答案: