Thursday 14 February 2019

angularjs - Access parent scope variables in Angular directive

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 = "";

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?

No comments:

Post a Comment

php - file_get_contents shows unexpected output while reading a file

I want to output an inline jpg image as a base64 encoded string, however when I do this : $contents = file_get_contents($filename); print &q...