How to hook new child state in runtime using ui-router?

Question

I need dymanically in runtime hook child state to root state. Injection of $state into service seems to be in place nevertheless $state.state is evaluated as undefined. But $state returns valid object. How to fix it?

app.service('EntryStateUrlService', ['$state', '$q', '$http', function($state,$q,$http){

    this.getEntryStateUrl = function(feeds) {

       var deferred = $q.defer();
       var idx = 0,
           promises = [];

       feeds.forEach(function(e) {
           $http.jsonp(e.link).success(function(data) {

               var generatedStateName = data.title;

               $state.state('root.' + generatedStateName, // $state.state is evaluated 
               {                                          // as undefined
                   templateUrl : '/partials/article-view.html', // here taking template
                   controller:   function($scope){ // controller to pass 
                       $scope.title = data.title;  // values to this template
                       $scope.author = data.author;
                   }
               })
            });
        });     
        /*stuff*/    
    } 
}]);

Side Note: You can not inject $state after configuration phase completion.. — Pankaj Parkar, Feb 04 '15 at 14:37

score 3 · Accepted Answer · edited May 23 '17 at 12:14

Try to check these Q & A:

Where we can see that generally: we take a reference to $stateProvider in config() phase... and then use it in run() phase:

The config() phase

var $stateProviderRef;

app.config(function ($stateProvider) {
    $stateProviderRef = $stateProvider;
});

The run() phase

app.run(['$q', '$rootScope', '$state', 'menuItems',
  function ($q, $rootScope, $state, menuItems) {

    // get some data somehow .. via $http
    menuItems
      .all()
      .success(function (data) 
      {
          // here we iterate the data
          angular.forEach(data, function (value, key) {

              // here we do DYNAMICALLY insert new states
              $stateProviderRef.state(value.name, value);
          });
          $state.go("home")
      });
  }]);

How to hook new child state in runtime using ui-router?

1 Answers1