个人中心
gpt4 book ai didi

javascript - ui-router 动态创建嵌套状态

转载 作者：行者123 更新时间：2023-11-30 20:57:33 25 4
gpt4 key购买 nike

我正在为我的网页创建一个垂直导航面板(一项非常基本的任务)。考虑到不同的用户 Angular 色对服务器上的授权模块应该有不同的导航项，希望通过从服务器获取数据来动态而不是静态地创建导航内容。

我正在尝试使用 UI Router 动态创建嵌套状态(这确实是一个被称为“分而治之”的自然想法)但遇到了问题(我在 another thread 中对此进行了描述，但只有代码片段，无法演示)。我在这里以更通用的方式为这个问题构建了一个简单的演示。

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

  <head>
    <meta charset="utf-8" />
    <title>demo</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script>
    <script>
      let app = angular.module('demo', ['ui.router']);
      
      app.provider('runtimeStates', ['$stateProvider', function ($stateProvider) {
        this.$get = function () {
          return {
            newState: function (name, param) {
              $stateProvider.state(name, param);
              return name;
            }
          };
        };
      }]);
    
      app.config(['$urlRouterProvider', '$stateProvider', function (up, sp) {
        sp.state('state1', state1);
        up.otherwise('/state1');
      }]);
      
      let state1 = {
        url: '/state1',
        controller: ['runtimeStates', '$state', function ($rs, $st) {
          this.stateName = $st.current.name;
          this.createSubState = function(){
            $st.go($rs.newState($st.current.name + '.state2', state2), {
              message: 'message from ' + $st.current.name + ' to state2'
            });
          }
        }],
        controllerAs: '$ctrl',
        template: `<div ng-click="$ctrl.createSubState()" style="border-style: solid; cursor: pointer;">
          <p>{{$ctrl.stateName}} begin</p>
          <ui-view></ui-view>
          <p>{{$ctrl.stateName}} end</p>
        </div>`
      };
      
      let state2 = {
        params: {message : ''},
        controller: ['runtimeStates', '$transition$', '$state', function ($rs, $tr, $st) {
          this.parentMessage = $tr.params().message;
          this.stateName = $st.current.name;
          this.createSubState = function(){
            $st.go($rs.newState($st.current.name + '.state3', state3),{
              message: 'message from ' + $st.current.name + ' to state3'
            });
          };
        }],
        controllerAs: '$ctrl',
        template: `<div ng-click="$ctrl.createSubState()" style="border-style: solid; cursor: pointer;">
          <p>{{$ctrl.stateName}} begin</p>
          {{$ctrl.parentMessage}}
          <ui-view></ui-view>
          <p>{{$ctrl.stateName}} end</p>
        </div>`
      };
      
      let state3 = {
        params: {message : ''},
        controller: ['runtimeStates', '$transition$', '$state', function ($rs, $tr, $st) {
          this.parentMessage = $tr.params().message;
          this.stateName = $st.current.name;
        }],
        controllerAs: '$ctrl',
        template: `<div style="border-style: solid;">
          <p>{{$ctrl.stateName}} begin</p>
          {{$ctrl.parentMessage}}
          <p>{{$ctrl.stateName}} end</p>
        </div>`
      };
    </script>
  </head>

  <body>
    <ui-view></ui-view>
  </body>

</html>

当 state1 的 View 填充时，我可以单击它并生成具有预期内容的 state2 View ；但是继续点击state2的view，生成的内容就乱七八糟了。预期:

state1 begin
state1.state2 begin
message from state1 to state2
state1.state2.state3 begin
message from state1.state2 to state3
state1.state2.state3 end
state1.state2 end
state1 end

生成:

state1 begin
state1.state2.state3.state2 begin
message from state1.state2.state3 to state2
state1.state2.state3.state2 begin
message from state1.state2.state3 to state2
state1.state2.state3.state2 end
state1.state2.state3.state2 end
state1 end

我无法解释原因，也不知道如何解决。

编辑

按照@scipper(第一个答案)的想法，我将演示更新为如下:

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

  <head>
    <meta charset="utf-8" />
    <title>Demo28</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script>
    <script>
      let app = angular.module('demo28', ['ui.router']);
      
      app.provider('runtimeStates', ['$stateProvider', function ($stateProvider) {
        this.$get = function () {
          return {
            newState: function (name, param) {
              $stateProvider.state(name, param);
              return name;
            }
          };
        };
      }]);
    
      app.config(['$urlRouterProvider', '$stateProvider', function (up, sp) {
        sp.state('state1', state1);
        up.otherwise('/state1');
      }]);
      
      let state1 = {
        url: '/state1',
        controller: ['runtimeStates', '$state', function ($rs, $st) {
          this.stateName = $st.current.name;
          this.createSubState = function(){
            $st.go($rs.newState($st.current.name + '.state2', state2), {
              message: 'message from ' + $st.current.name + ' to state2'
            });
          }
        }],
        controllerAs: '$ctrl',
        template: `<div style="border-style: solid;">
          <p ng-click="$ctrl.createSubState()" style="cursor: pointer; color: blue;">{{$ctrl.stateName}} begin</p>
          <ui-view></ui-view>
          <p>{{$ctrl.stateName}} end</p>
        </div>`
      };
      
      let state2 = {
        params: {message : ''},
        controller: ['runtimeStates', '$transition$', '$state', function ($rs, $tr, $st) {
          this.parentMessage = $tr.params().message;
          this.stateName = $st.current.name;
          this.createSubState = function(){
            $st.go($rs.newState($st.current.name + '.state3', state3),{
              message: 'message from ' + $st.current.name + ' to state3'
            });
          };
        }],
        controllerAs: '$ctrl',
        template: `<div style="border-style: solid;">
          <p ng-click="$ctrl.createSubState()" style="cursor: pointer; color: blue;">{{$ctrl.stateName}} begin</p>
          {{$ctrl.parentMessage}}
          <ui-view></ui-view>
          <p>{{$ctrl.stateName}} end</p>
        </div>`
      };
      
      let state3 = {
        params: {message : ''},
        controller: ['runtimeStates', '$transition$', '$state', function ($rs, $tr, $st) {
          this.parentMessage = $tr.params().message;
          this.stateName = $st.current.name;
        }],
        controllerAs: '$ctrl',
        template: `<div style="border-style: solid;">
          <p>{{$ctrl.stateName}} begin</p>
          {{$ctrl.parentMessage}}
          <p>{{$ctrl.stateName}} end</p>
        </div>`
      };

    </script>
  </head>

  <body>
    <ui-view></ui-view>
  </body>

</html>

内容变为:

state1 begin
state1.state2.state3 begin
message from state1.state2 to state3
state1.state2.state3 begin
message from state1.state2 to state3
state1.state2.state3 end
state1.state2.state3 end
state1 end

显示stat2的 View 受state3的影响，应该是使用UI Router的问题。 -- 问题还是没有解决。

最佳答案

因为 ng-click 的缘故，它搞砸了。第一次点击有效，第二次点击触发内部 ng-click，然后是外部 ng-click。这就是为什么总是附加 .state2 的原因。

编辑

尝试将 $event.stopPropagation() 添加到 ng-click 中:

<div ng-click="$event.stopPropagation(); $ctrl.createSubState()">

编辑 2

第二个建议:您只有未命名的 View 。通过我的修复，我发现这两个内部 View 似乎是相同的。第二次点击后我的输出是:

state1 begin
state1.state2.state3 begin
message from state1.state2 to state3
state1.state2.state3 begin
message from state1.state2 to state3
state1.state2.state3 end
state1.state2.state3 end
state1 end

编辑 3 - 解决方案

我提到在状态更改为 state3 之后调用 state2 Controller 的原因是参数 message。对状态参数的每次更改都会导致状态默认解析。如果您不希望这样，请将参数指定为动态的，例如:

params: {
  message: {
    value: '',
    dynamic: true
  }
}

关于javascript - ui-router 动态创建嵌套状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47494087/

25 4 0
文章推荐： c# - DateTime Relative 转换问题
文章推荐： javascript - d3 js 双向水平条形图
文章推荐： c - 如何修复 "segmentation fault (core dumped)"？
文章推荐： Javascript 函数改变 NCS 颜色
行者123
个人简介

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

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