【问题标题】:Angularjs UI-router controller not update after resolveAngularjs UI-router控制器在解决后不更新
【发布时间】:2014-08-28 12:19:37
【问题描述】:

我在 Angularjs 中使用 ui-router 时遇到问题。场景很简单,我有一个用户列表,当我点击用户名时,视图会跳转到编辑表单(这个也是create-new-user表单)。

但问题是,解析编辑状态后的返回值并没有改变。似乎控制器没有更新新状态。 *(在我的真实项目中尝试使用 $state.reload 但没有成功)

这是我的 plnkr 供参考:http://plnkr.co/edit/Gv8sQk7ixfni6tzhqjn3

这是我的路由配置:

$stateProvider
    .state('list',{
      url:'/',
      templateUrl:'list.html',
      controller:'mainCtrl',
      resolve:{
        listUser: function(userService){
          return userService.list();
        }
      }
    })
    .state('user',{
      url:'/user',
      templateUrl:'form.html',
      controller:'userCtrl',
      resolve:{
        objUser: function(userService){
          // Init a new "User" object
          console.log("New user");
          return "New name";
        }
      }
    })
    .state('user.edit',{
      url:'/:id',
      templateUrl:'form.html',
      controller:'userCtrl',
      resolve:{
        objUser: function(userService, $stateParams){
          // Return the user 
          console.log("Edit user ", userService.get($stateParams.id));
          return userService.get($stateParams.id);
        }
      }
    });

我在解析步骤中创建所有必要对象的原因是在阅读了这篇文章 Advanced routing and resolves 之后,我发现自己处于那个循环中,我在控制器中执行所有请求的事情,当然,重复的代码是一回事我无法避免。所以,我试图通过改变我处理数据的方式让它变得更好,但现在卡住了。

谁能指出我哪里出错了?真的很感激。

【问题讨论】:

  • 所发生的是user状态的解析函数在user.edit之后调用,并覆盖它。

标签: javascript angularjs angular-ui-router resolve


【解决方案1】:

我想说,你的想法不错。如果我们应该遵循它,我会将 user_new 和 user_edit 状态设为兄弟。查看更新的version

.state('user_new',{
      url:'/user',
      templateUrl:'form.html',
      controller:'userCtrl',
      resolve:{
        objUser: function(userService){
          // Init a new "User" object
          console.log("New user");
          return "New name";
        }
      }
    })
.state('user_edit',{
      url:'/:id',
      templateUrl:'form.html',
      controller:'userCtrl',
      resolve:{
        objUser: function(userService, $stateParams){

          // Return the user 
          console.log("Edit user ", userService.get($stateParams.id));
          return userService.get($stateParams.id);
        }
      } 
    })

而且,我们可以在 user_edit 上编辑现有的并在 user_new 上创建新的。这两种状态实际上不需要是父子状态,因此解析器可以将不同的 userObj 传递给每个状态...

查看here

【讨论】:

  • 感谢更新版本,但实际上您所做的是创建 2 个单独的状态(一个用于新建,另一个用于编辑),而不是子父关系对吗?我想是这样的
  • 这正是我的回答:我创建了兄弟姐妹(兄弟姐妹),而不是父子。现在我们可以从一个控制器中获利,但是两个不同的解析器...不是很棒吗? ;) ;)
【解决方案2】:

在user.edit之后调用用户状态的resolve函数,并覆盖它。

这似乎是这里引用的一个问题: https://github.com/angular-ui/ui-router/issues/868

你可以在这里https://github.com/angular-ui/ui-router/issues/78Promise dependency resolution order in angular ui-router获得一些额外的信息

【讨论】:

  • 是的,我可以通过查看 console.log 看出,user.edit 中的那个实际上确实运行了一次,但返回的值最终被覆盖了。想知道这行文档,"Child states inherit views (templates/controllers) and resolved dependencies from parent state(s), which they can override."
  • 是的,我认为这就是为什么它是一个未解决的问题。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2015-11-10
  • 2014-10-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-04-10
  • 2015-03-23
相关资源
最近更新 更多