3

这是我当前的设置，每一列都由一个控制器表示：

<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答案是什么？

4

2 回答 2

0

您可以使用 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/嵌套状态-%26-嵌套视图）。

于 2013-06-04T21:46:58.183 回答
0

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

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

我最好奇的是url中是否存在“Column1，Column2和Column3”？这些有什么需求？...

这里有一个小插曲，看看我是否刚刚接近理解了这个想法的一部分：-http://plnkr.co/edit/ZkaANVq5tCdLKWqHFa16?p= preview

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

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

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

于 2014-01-21T10:28:43.637 回答