3

我有一个页面，其中包含分布在多个选项卡上的 HTML 表单元素。我希望用户能够切换选项卡而不会丢失他在表单元素上输入的数据（并且我还希望保存不必要的数据重新加载）。而且我仍然希望能够向某人传递指向特定选项卡的链接。

听起来 ui-extras 粘性状态应该完全符合我的需要。除了我一直没有成功让它发挥作用。

我研究了示例源代码，当我启动示例时，例如在 controllers.js 的第 57 行中找到的库存控制器的构造函数中使用 firebug 设置断点，我看到构造函数只被触发一次。然而，我的控制器构造函数被一遍又一遍地触发，我的应用程序的行为就像不存在粘性状态一样，尽管如果我启用粘性状态调试，它会告诉我它正在做某事（停用和重新激活状态）。

我发现有人在此答案的评论中声明粘性状态仅适用于命名视图，因此我尝试为我的视图命名，但这没有任何区别。

我尝试在标签之前插入一个明确的“根状态”。

我尝试通过 ng-controller 或通过状态中的控制器定义插入控制器。

github 上的示例是一个很好的展示，但远远超出最小限度，很难看出实际需要什么，什么不需要。

什么是开始使用粘性状态所需的最小示例？（奖励：我的代码有什么问题？）。

作为参考，这里有一个失败的尝试（请参阅历史以查看先前尝试的选择）。

这是我当前失败的源代码：

var log = '';

function mkController(msg) {
  return function($scope) {
    // This is the constructor of a controller
    // I'd expect this constructor to the first time a state is loaded.
    // When switching to a sister state and back it should not be called again.

    if (!$scope.random) {
      // I expect the $scope object to be retained when changing states for and
      // back. So even if my assumption that the controller will be persistent
      // would be wrong this is to check whether the $scope survives.
      // If the scope survives the random number will be initialized only once
      // and then it won't change anymore:

      $scope.random = Math.round(Math.random()*10000);
    }
    // This log will tell us how often the controller constructor has been called
    // (Should be only once, I think)
    log += 'creating: ' + msg + '\n';
    this.message = log;
  }
}
angular.module('plunker', ['ui.router', 'ct.ui.router.extras.sticky', 'ct.ui.router.extras.dsr'])
.controller('ControllerA', mkController('ControllerA'))
.controller('ControllerB', mkController('ControllerB'))
.run(function($templateCache) {
  $templateCache.put('root.html', '<div ui-view="myview"></div>');
  $templateCache.put('templateA.html', '<div ng-controller="ControllerA as controller"><pre>Random: {{random}}, Message (templateA): {{controller.message}}</pre></div>');
  $templateCache.put('templateB.html', '<div ng-controller="ControllerB as controller"><pre>Random: {{random}}, Message (templateB): {{controller.message}}</pre></div>');
})
.config(function($stateProvider) {
  $stateProvider
  .state('root', {
    url: '/',
    templateUrl: 'root.html'
  }).state('root.stateA', {
    url: '/stateA',
    views: {
      myview: {
        templateUrl: 'templateA.html',
      }
    },
    sticky: true,
    deepStateRedirect: true
  }).state('root.stateB', {
    url: '/stateB',
    views: {
      myview: {
        templateUrl: 'templateB.html',
      }
    },
    sticky: true,
    deepStateRedirect: true
  });
})
.config(function($stickyStateProvider) {
  $stickyStateProvider.enableDebug(true);
});
4

1 回答 1

8

我想到了：

  • 首先，我没有意识到命名视图实际上是如何使用的：每个选项卡都有一个单独的视图。
  • 其次，我没有意识到我需要自己隐藏和显示视图。

演示页面中都提到了两者，但我不得不承认我并没有真正仔细阅读演示页面的文本，因为我认为这只是关于这个特定演示的信息。

无论如何：这是一个示例，我认为这是使粘性状态持续所需的最低要求：

HTML

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.3.12" src="https://code.angularjs.org/1.3.12/angular.js" data-require="angular.js@1.3.x"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.js"></script>
    <script src="ui-router-extras.js"></script>
    <script src="app.js"></script>
  </head>

  <body>
    <ul class="nav nav-tabs nav-tabs-head" role="tablist">
        <li ui-sref-active="active"><a ui-sref="root.stateA" role="tab">StateA</a></li>
        <li ui-sref-active="active"><a ui-sref="root.stateB" role="tab">StateB</a></li>
    </ul>
    <div ui-view="" />
  </body>

</html>

JavaScript

var log = '';

function mkController(msg) {
  return function($scope) {
    // This is the constructor of a controller
    // I'd expect this constructor to the first time a state is loaded.
    // When switching to a sister state and back it should not be called again.

    if (!$scope.random) {
      // I expect the $scope object to be retained when changing states for and
      // back. So even if my assumption that the controller will be persistent
      // would be wrong this is to check whether the $scope survives.
      // If the scope survives the random number will be initialized only once
      // and then it won't change anymore:

      $scope.random = Math.round(Math.random()*10000);
    }
    // This log will tell us how often the controller constructor has been called
    // (Should be only once, I think)
    log += 'creating: ' + msg + '\n';
    this.message = 'Current msg: ' + msg + '\n\n' + log;
  }
}
angular.module('plunker', ['ui.router', 'ct.ui.router.extras.sticky'])
.controller('ControllerA', mkController('ControllerA'))
.controller('ControllerB', mkController('ControllerB'))
.config(function($stateProvider) {
  $stateProvider
  .state('root', {
    url: '/',
    template: '<div ui-view="a" ng-show="$state.includes(\'root.stateA\')"></div><div ui-view="b"  ng-show="$state.includes(\'root.stateB\')"></div>'
  }).state('root.stateA', {
    url: '/stateA',
    views: {
      'a@root': {
        template: '<div ng-controller="ControllerA as controller"><h1>A</h1><pre>Random: {{random}}, Message (templateA): {{controller.message}}</pre></div>',
      }
    },
    sticky: true
  }).state('root.stateB', {
    url: '/stateB',
    views: {
      'b@root': {
        template: '<div ng-controller="ControllerB as controller"><h1>B</h1><pre>Random: {{random}}, Message (templateB): {{controller.message}}</pre></div>',
      }
    },
    sticky: true
  });
})
.config(function($stickyStateProvider) {
  $stickyStateProvider.enableDebug(true);
})
.run(function ($rootScope, $state) {
  $rootScope.$state = $state;
});

plunkr 上的演示

关联

于 2015-02-05T12:48:36.827 回答