Updating resolved objects in ui.router parent states

前端 未结 2 1066
有刺的猬
有刺的猬 2020-12-07 01:59

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

相关标签:
2条回答
  • 2020-12-07 02:22

    you could store it in a service.

    .service("myService", function($q) { 
      // the actual data is stored in a closure variable
      var data = undefined;
      return { 
        getPromise: function() { // promise for some data
          if (data === undefined) // nothing set yet, go fetch it
            return $http.get('resourceurl').then(function(value) { data = value; return data; });
          else
            return $q.when(data); // already set, just wrap in a promise.
        },
        getData: function() { return data; }, // get current data (not wrapped)
        setData: function(newDataVal) { data = newDataVal; } // reset current data
      }
    })
    
    // `parent` wont' enter until getPromise() is resolved. 
    .state('parent', resolve:{objectX: function(myService) { return myService.getPromise(); } });
    
    .controller('childstateCtrl', $scope, myService) {
        $scope.data.objectX = myService.getData();
        $scope.someEvent = function(someData){ 
          myService.setData(someData);
        }
    }
    
    .controller('otherChildCtrl', $scope, myService){
        // how to get the updated objectX?
        var data = myService.getData();
    }
    
    0 讨论(0)
  • 2020-12-07 02:42

    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)

    0 讨论(0)
提交回复
热议问题