个人中心
gpt4 book ai didi

angularjs - 保留 angularjs ui-router 状态与 ui-router-extras 中的粘性状态所需的最低限度是多少？

转载 作者：行者123 更新时间：2023-12-02 22:52:14 26 4
gpt4 key购买 nike

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

听起来 ui-extras 粘性状态应该完全满足我的需要。只是我一直没有成功地让它发挥作用。

我研究了example源代码，当我启动示例时，我例如在 Line 57 in controllers.js 中找到的库存 Controller 的构造函数中使用 firebug 设置断点，我看到构造函数只被触发一次。然而，我的 Controller 构造函数被一遍又一遍地触发，并且我的应用程序的行为非常类似于粘性状态不存在，尽管如果我启用粘性状态调试，它会告诉我它正在做某事(停用和重新激活状态)。

我发现有人在 this answer 的评论中指出粘性状态仅适用于命名 View 。 ，所以我尝试给我的 View 命名，但这没有任何区别。

我尝试在选项卡之前插入明确的“根状态”。

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

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

开始使用粘性状态所需的最小示例是什么？(奖励:我的代码出了什么问题？)。

此处供引用的是 plunkr with my failed attempt (查看历史记录以查看之前尝试的选择)。

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

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);
});

最佳答案

我明白了:

  • 首先，我没有意识到命名 View 的实际用途:每个选项卡都有一个单独的 View 。
  • 其次，我没有意识到我需要自己隐藏和显示 View 。

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

无论如何:这是一个我认为是保持粘性状态所需的最低限度的示例:

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 上的演示

Link

关于angularjs - 保留 angularjs ui-router 状态与 ui-router-extras 中的粘性状态所需的最低限度是多少？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28333891/

26 4 0
文章推荐： requirejs - jQuery 文件上传和 RequireJS 配置
文章推荐： audio - IMFTransform SetInputType()/SetOutputType() 失败
文章推荐： elasticsearch - Kibana多个仪表板支持
文章推荐： sql - DateAdd 列导致溢出
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com