How to receive a directive within a component in AngularJS

This photo illustrates what I want to do:

Link to TOTVS AngularJS documentation

This is the snippet of form I'm trying to do this. I am getting the components required , number and maxlength within validation .

<div class="col-md-6">
<div class="form-group">
    <label for="peso">
        Peso:
    </label>
    <input required type="number" class="form-control" id="peso" name="peso" placeholder="" ng-model="$ctrl.model.peso"
        ng-maxlength="5">

    <validation>
        <required>{{'componente_criterio.message_required_peso' | translate}}</required>
        <number>{{'componente_criterio.message_number_peso' | translate}}</number>
        <maxlength>{{'componente_criterio.message_maxlength_peso' | translate}}</maxlength>
    </validation>

</div>

HTML should look more or less like this.

<div class="row">
<div class="col-md-6">
    <component-pai 
        diretive-field 
        . 
        . 
        .
    >

        <validation>
            <required>{{'componente_criterio.message_required_peso' | translate}}</required>
            <number>{{'componente_criterio.message_number_peso' | translate}}</number>
            <maxlength>{{'componente_criterio.message_maxlength_peso' | translate}}</maxlength>
        </validation>

    </component-pai>
</div>

My code looks like this:

(function() {
    'use strict';

    angular
        .module('App')
        .directive('directiveField', directiveField);

    directiveField.$inject = [];
    function directiveField() {
        var directive = {
            restrict: 'A',
            controller: directiveFieldController,
            controllerAs: 'vm',

            template: function (elem, attr) {

                var html = '<div class="teste-passou">Diretiva recebida</div>';

                return html;
            }
        };
        return directive;
    }
    /* @ngInject */
    function directiveFieldController () {
        console.log('directive-field',this)
    }

})();

(function() {
    'use strict';

    angular
        .module('App')
        .component('componentPai', {
            transclude: true,
            // template:'htmlTemplate',
            require: {
                criterioFormCtrl: '^criterioForm',
            },
            templateUrl: '/app/componentes/form/componentPai.html',
            controller: componentPaiController,
            controllerAs: '$ctrl',
            bindings: {
                componentPaiClass: '@',
                // directiveField: '<'     <- eu tentei isso mais não funcionou
            },
        });

    componentPaiController.$inject = [ ];
    function componentPaiController( ) {
        var $ctrl = this;
        console.log('componentPai', $ctrl)

        $ctrl.$onInit = function() { };
        $ctrl.$onChanges = function(changesObj) { };
        $ctrl.$onDestroy = function() { };
    }
})();

How do I get the power of totvs?