How to receive a directive within a component in Angularjs

Question

This photo exemplifies what I wish to do:

Link to TOTVS Angularjs documentation

This is the excerpt from the form where I’m trying to do this. I’m getting the components required, number and maxlength inside 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 something like this I imagine.

<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 is 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 I get the power of Totvs?

Answer 1

can take these parameters inside an object in Agular and pass the attributes to directive, because the angular has the refusal of two way data bind, or when the receiving Agularjs it will already add there automatically.