child state should load a directive inside parent ui-view

Question

i have this config:

$stateProvider
        .state('ShowTabForm', {
            url: '/ShowTabForm/:id/:title',
            templateUrl: '/app/templates/pages/ShowTabForm.html',
            controller: 'tabFormController'
        })
        .state('ShowTabForm.LoadTabForm', {
            url: '/LoadTabForm/:tabId',
            template: '<dynamic-form></dynamic-form>'
        });

ShowTabForm.html is like below:

<div ng-controller="tabFormController">
    <ui-view></ui-view>
</div>

and in my tabFormController i change state:

$state.go('ShowTabForm.LoadTabForm', { tabId: 727 });

problem is, it does not load directive inside parent ui-view. when i trace code the dynamic-form controller run twice. highly appreciate to help me fix this :)

UPDATE: I found the problem but i can not solve it. The [dynamicForm] directive load correctly but dynamicform.html(view) render before data fetch from $http service inside dynamicFormController. Any idea...?

Answer 1

Extended, based on comments - There is working example

let's have two $http calls to data1.json, data2.json. And that is the service:

  .factory('dynamicformService', ["$http", function ($http) {
    var getForm = function (objectId) {

      return $http({ method: "GET", url: "data" + objectId + ".json" })
        .then(function (result) {
          return result.data;
        });
    }; 

    return {
        getForm: getForm
    };
}])

and these is the UI-Router state controller

  .controller('dynamicformController', ['$scope','$stateParams', 'dynamicformService', 
  function dynamicformController($scope, $stateParams, dynamicformService){
    dynamicformService
        .getForm($stateParams.tabId)
        .then(function (forms) {
          $scope.forms = forms; 
        });
  }])

And finally the dynamic-form template

<div ng-repeat="form in forms" >

<label for="{{form.Name}}">{{form.Name}}</label>
<input 
  type="{{form.type}}" 
  name="{{form.Name}}" ng-model="form.Name" />

</div>

And these links make it working

<a href="#/ShowTabForm/2/title1/LoadTabForm/1">
<a href="#/ShowTabForm/2/title2/LoadTabForm/2">

Check it here Original part

Your solution should be working. To support it, I created a working plunker here.

This is the directive dynamic-form, which I used:

 .directive('dynamicForm', function(){
    return {
      template: "This is the dynamic Form",
      controller: function(){console.log("inside of a form")},
    };
  })

These links are working and rendering it:

<a href="#/ShowTabForm/1/title1">
<a href="#/ShowTabForm/2/title2">
<a href="#/ShowTabForm/2/title1/LoadTabForm/1">
<a href="#/ShowTabForm/2/title2/LoadTabForm/2">

The snippet of the state definition (as in the question) is NOT changed:

.state('ShowTabForm', {
    url: '/ShowTabForm/:id/:title',
    templateUrl: 'app/templates/pages/ShowTabForm.html',
    controller: 'tabFormController'
})
.state('ShowTabForm.LoadTabForm', {
    url: '/LoadTabForm/:tabId',
    template: '<dynamic-form></dynamic-form>'
});

Check it here