Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
645 views
in Technique[技术] by (71.8m points)

angularjs - Updating resolved objects in ui.router parent states

My question is two fold:

1 - I have a parent state and several child states using ui.router, there's one object (stored in mongodb) that is need in all states, but it gets updated by all states. In this scenario does it make sense to use the parent state's resolve option to populate the object?

2 - If this is the proper way to do this, how can I update that "reference" (the mock service injector created by the ui.router) to that object from every state.

To help in explain he's a example of the idea (lot's of code ommited)

.state('parent',resolve:{objectX:return x.promise;},...);

.controller('childstateCtrl',$scope,objectX){
    $scope.data.objectX = objectX;
    $scope.someEvent =function(){ 
    // something updates objectX on the scope
    }
}

.controller('otherChildCtrl',$scope,objectX){
    // how to get the updated objectX?
}

Thanks in advance

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Not fully sure if I can see where is the issue... but if you are searching for a way how to share access to updated reference, it should be easy. There is an example

Let's have these states

$stateProvider
  .state('root', {
    abstract: true,
    template: '<div ui-view></div>',
    resolve: {objectX : function() { return {x : 'x', y : 'y'};}},
    controller: 'rootController',
  })
  .state('home', {
    parent: "root",
    url: '/home',
    templateUrl: 'tpl.example.html',
  })
  .state('search', {
    parent: "root",
    url: '/search',
    templateUrl: 'tpl.example.html',
  })
  .state('index', {
    parent: "root", 
    url: '/index',
    templateUrl: 'tpl.example.html',
  })

Working with only one controller (for a root state):

.controller('rootController', function($scope, objectX){
  $scope.data = { objectX: objectX };
})

And for this example, this is shared template:

<div>
  <h3>{{state.current.name}}</3>

  x <input ng-model="data.objectX.x"/>
  y <input ng-model="data.objectX.y"/>
</div>

So, in this scenario, parent (root) has injected an object data into $scope. That reference is then inherit as described here:

Scope Inheritance by View Hierarchy Only

Check that example in action here. If you need more details (than in the link above, check this Q&A)


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...