0

I have a dynamic form using schema form (http://schemaform.io/) - I need to include some buttons to edit or delete each control in the form, so I built this directive that finds all form controls and then filters the specific ones I need according to a pattern in the name. I know this is probably not the right way to use a directive, but since those fields are built dynamically, the only thing I can think of using to apply the directive to them is the class - and then filter, because there are other fields in the page which I don't want to be affected by the directive.

angular.module('appCliente')
   .directive('formControl', function ($compile) {
      return {
         restrict: 'CAE',
         link: Link
      };

      function Link(scope, element, attrs) {


         var patt = new RegExp("^[a-zA-Z]+[0-9]{14}$");
         var res = patt.test(element[0].name);

         if (res) {

            //finds in the $scope.formDefinition the element with the name corresponding to the controller selected
            ̶v̶a̶r̶ ̶c̶o̶n̶t̶r̶o̶l̶e̶r̶E̶d̶i̶t̶e̶d̶ ̶=̶ ̶$̶s̶c̶o̶p̶e̶.̶f̶o̶r̶m̶D̶e̶f̶i̶n̶i̶t̶i̶o̶n̶.̶f̶i̶n̶d̶(̶
            var controlerEdited = scope.formDefinition.find(
                    function (obj) { 
                    return obj.name === element[0].name;
                }
            )); 

            //Creates the button to append and calls the $scope.editControl on click, passing the correct item from the $scope.formDefinition object

            var elementAppend = "<a id='ges-pan-srv-lst-bEdit' class='btn btn-default btn-sm' ng-click='editControl(" + controlerEdited + ")' title=\"{{'Editar Formulário' | translate}} {{formulario.nome}}\" data-toggle='modal' data-target='#modalOpcoes'><i class='fa fa-pencil'></i></a>";

            var a_input = angular.element($compile(elementAppend)(scope));
            element.after(a_input);
         }

      }
   });

The problem is that I don't know how to access the $scope variables or functions from the controller - the object is Always undefined and the function is never called on the click event. I want to call that function on the click event of this button that I'm appending to the element where the directive is in. To do that properly, I need to access the funtion $scope.editControl and the variable $scope.formDefinition, both defined in the controller where the elements using this directive are.

  angular.module('appCliente').controller('FormularioEditarController', ['$scope', '$location', '$routeParams', '$translate'
   function ($scope, $location, $routeParams, $translate) {

    //variable I need to access on the directive
    $scope.formDefinition = {};

    //Function I need to acess on the directive
     $scope.editControl = function (controle) {
            //edit this control
     }


   }

I might be way off here, so, if there's a better solution, I'd appreciate it.


Still not working. In this example https://plnkr.co/edit/pzFjgtf9Q4kTI7XGAUCF?p=preview, it works, but for some reason my function is never called, and the variable is always undefined. This variable is only going to be set by an initialization function, like this

 formularioFactory.GetFormulario($routeParams.idFormulario) 
    .success(function (result) {
         $scope.formDefinition= result;

I wonder if this is not the reason why this variable is undefined for the directive. I don't know exactly when the directive code runs, is it after everything else?

4

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.