How to make a directive?

Question

Angular

Good afternoon. I'll try to formulate a question.
There is a Multi-Step Form (I think many have seen it). I would like to translate it into a directive, and also, most likely, each individual field into a directive. And what to do with $stateProvider in this case? You can't put it in a directive - it remains in the module config. Those. stays like this

.state('form', {
            url: '/form',
            template: '<form></form>',
                   })
        .state('form.profile', {
            url: '/profile',
            template: '<form-profile></form-profile>'
        })
        .state('form.interests', {
            url: '/interests',
            template: '<form-interests></form-interests>'
        })
        .state('form.payment', {
            url: '/payment',
            template: '<form-payment></form-payment>'
        });

and make a directive (the main one, where there is ui-view)

angular
    .module('app.core')
    .directive('form', form);

function form() {
    var directive = {
        link: link,
        template: '  <form id="signup-form" ng-submit="processForm()">
                <div id="form-views" ui-view></div>
      </form>',
        restrict: 'EA'
    };
    return directive;

    function link(scope, element, attrs) {
    scope.formData = {}
    }
}

and make field directives

angular
    .module('app.core')
    .directive('formProfile', formProfile);

function formProfile() {
    var directive = {
        link: link,
        require: '^form'
        templateUrl: 'views/form-profile.html">
          
        restrict: 'EA'
    };
    return directive;

    function link(scope, element, attrs) {
    
    }
}

Well, the rest of the fields. Do I understand correctly that if I do in each directive require: '^предыдущая директива', then the controller is inherited and I will "collect" the form as a result?
In general, there are two questions so far (if someone understood something)
1) How, in the case of a directive, to deal with ui-router, is it possible to put stateProvider somewhere
2) Is the controller (link) inherited in the directive so as not to lost shape?

Answer 1

then the controller is inherited and I will "collect" the form as a result?

it's not inherited, you just access the controller of the directive yours depends on.
uiRouter should stay outside. You can add a callback to the directive, which will be called on the transition between screens, and there already change the state of the ui router. Or how. But uiRouter and everything related to navigating between states should stay outside.
link is not a controller, link is a link. And no, both the controller and the link will be destroyed when the scope is destroyed (or when the element is removed).
Store data in a service.