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?
