【问题标题】:AngularJS UI-Router: Two way binding between resolved object in child/parent state—Child state won't updateAngularJS UI-Router:子/父状态下已解析对象之间的两种方式绑定-子状态不会更新
【发布时间】:2015-05-31 20:37:34
【问题描述】:

我有一个父状态和一个子状态。父状态解析一个对象。然后,子状态从父状态解析该对象。

因为子状态正在从父状态解析对象,所以我预计会发生双向绑定。奇怪的是,虽然子状态发生了变化(即添加属性),但更新了父状态中的对象——父状态中对象的更改并没有影响子状态中已解析的对象,这让我感到惊讶。

我知道我可以 $broadcast 将父状态中的已解析对象更改为子状态,但我想了解为什么子状态中的已解析对象没有自动更新。

这就是我正在使用的东西。父状态:

.config(function($stateProvider) {
  $stateProvider.state('parent', {
    template:  ''
    +'  <div>Parent State</div>'
    +'    <div>Modify property on parent state, object.someProperty:'
    +'      <input ng-model="object.someProperty">'
    +'        {{object.someProperty}}'
    +'    </div>'
    +'  </div>' 
    +'  Include Child State'
    +'  <ui-view></ui-view>',
    controller: function($scope) {

      $scope.object = object;

    },
    resolve: {
       object: [function() {
         var object = '';
         object.someProperty = 'initialValue';
         return object;
       }]
    }
  })

和子状态:

  .state('parent.child', {
    template: ''
    +'  <div>Child State</div>'
    +'    <div>Watch property from parent state, object.someProperty'
    +'        {{object.someProperty}}'
    +'    </div>',
    resolve: {
      objectFromParent: ['object', function(object) {
        return object;
      }]
    },
    controller: function(objectFromParent) {

      $scope.objectFromParent = objectFromParent;          
    }        
  });
});

子状态中的resolve 是否仅在实例化时出现?即——一旦子状态从父状态解析对象,它就不再监听解析对象的变化?情况似乎不应该如此。

PLNKR 可能会出错——我的代码由于未知原因无法工作: http://plnkr.co/edit/EjV4TtSIP6HpVMG0oanL?p=preview

感谢任何方向或见解。谢谢!

【问题讨论】:

  • 我怀疑这会导致您遇到的问题,但我想我会提到:当您在父状态下解决某些问题时,您不需要在子状态下重新解决它。解析的对象可以注入到任何子状态的控制器中,例如您可以删除子状态中的解析块,只需将object 注入到子状态的控制器中。
  • 感谢您的反馈!我实际上不知道 - 不能解决问题,但知道会有所帮助:-)

标签: javascript angularjs angular-ui-router


【解决方案1】:

您的所有期望都是正确的。还有一个 bit adjusted plunker 正在工作。

最重要的改变是让共享对象成为一个真实的对象(不是字符串)

$stateProvider.state('parent', {
    url: '/parent',
    template:  ...,
    controller: function($scope, object) {        
      $scope.object = object;       
    },
    resolve: {
       object: [function() {
         //var object = '';
         var object = {};
         object.someProperty = 'initialValue';
         return object;
       }]
    }

主要是线条:

//var object = '';
var object = {};

这样,$scope.object 就变成了一个引用对象。这意味着,父母和孩子将共享对该对象的引用。事实上 - 如果有人会改变它(添加属性,改变那个属性) - 所有人都会知道这个改变......因为他们共享对一个对象的引用

查看here

【讨论】:

  • 太棒了。只是好奇。如果控制器在不同的文件中怎么办?
  • @PushkarKathuria 这种控制器有问题吗?我为你创建了一个 plunker plnkr.co/edit/6Qg2EF45vWNPZJ67YWAq?p=preview。有帮助吗?
  • 好吧,我面临的问题是我正在从 http 请求(承诺)中获取数据。在控制器端,我将对象设置为附加到 vm 的对象。这里发生了什么,点击一个按钮,我打开一个模式框关闭,它应该更新底层屏幕上的值。我希望我能让你明白。请协助。或者我可以在今天晚些时候分享一个 plunkr。
  • @PushkarKathuria 我强烈建议......提出一个问题。如果需要,请添加此帖子的链接。我相信你会得到比我更多的观众...... (很忙;(这些天)。我相信这种方式可以给你最多...... (plunker添加到这样问题..正如你所建议的那样是必须的)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2014-10-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-02-13
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多