AngularJS Dynamic compilation of component not passing events up - angularjs

Question

I am using modals to display forms that are presented to users. The forms are all components with an onSave and onCancel method
bindings: {
entity: '<',
readOnly: '<',
onSave: '&',
onCancel: '&'
},
I want to pass into a modal the tag of the form to present in the modal and then pass the parameters returned by the component's onSave/onCancel event back to the modal which will return it to the caller. To do this, I am putting an directive that sets the properties of the component and then runs it through the $compile method to generate it:
function link(scope, elem, attrs) {
if (scope.formType != null && scope.formType != '') {
var objString = "<" + scope.formType + " "; //create beginning tag
objString += "entity='assignedEntity' read-only='readOnly' ";
objString += "on-save='onSave(entity)' on-cancel='onCancel(entity)'>";
objString += "</" + scope.formType + ">"; //add end tag
var obj = $compile(objString)(scope);
elem.append(obj);
}
};
return {
restrict: 'E',
scope: {
formType: '=',
onSave: '&',
onCancel: '&',
assignedEntity: '<',
readOnly: '<'
},
link: link
}
I then call the directive and pass the appropriate properties from a generic modal box like so:
<form-generator
form-type="vm.ui.properties.formType"
on-save="vm.ok(entity)"
on-cancel="vm.cancel(entity)"
assigned-entity="vm.returnItem.entity"
read-only="vm.ui.properties.readOnly">
</form-generator>
This successfully generates the specified form component and passes in the right values for each property down to the form component. My issue is that when the onSave or onCancel events are thrown by the component, the modal controller is receiving the event (vm.ok or vm.cancel gets called) but the parameters passed to those events are not passed up with the call. the properties passed to vm.ok and vm.cancel are always undefined.
From the component, I am calling the onSave/onCancel method like this:
ctrl.onSave({
entity: ctrl.entity
});
and I have verified that ctrl.entity does in fact have a value in it.
Any thoughts as to why the parameters passed back up the call tree are undefined by the time it gets to the modal controller?
I created this plunkr to help define the problem I am having: Example

Answer 1

Please review the code, after a bit of debugging it seems like you just forgot to attach the entity as a part of the function that listens for click $event. Here's the working plunker.
(function() {
var directiveID = "formGenerator";
angular.module('app').directive(directiveID, ['$compile', FormGenerator]);
function FormGenerator($compile) {
function link(scope, elem, attrs) {
console.log(scope, elem, attrs);
if (scope.formType !== null && scope.formType !== '') {
var objString = "<" + scope.formType + " "; //create beginning tag
//PLEASE TAKE A LOOK HERE, WE'RE EXPECTING THE EVENT TO PROPOGATE TO THE PARENT CONTROLLER
//so we take into account the event on-save, the same would have to be done for on-cancel
objString += "on-save='onFormSave($event)' on-cancel='onFormCancel(entity)'>";
objString += "</" + scope.formType + ">"; //add end tag
var obj = $compile(objString)(scope);
elem.append(obj);
}
}
return {
restrict: 'E',
scope: {
formType: '=',
onFormSave: '&',
onFormCancel: '&'
},
link: link
}
}
})();
(function() {
var componentID = "testForm";
var app = angular.module("app");
function TestFormController() {
var ctrl = this;
ctrl.entity = {
name: "this is the entity passed up"
};
ctrl.save = function(event) {
console.log(event);
console.log("In component: " + ctrl.entity.name);
ctrl.onSave({
//AND ON SAVE, we make the this controllers model-properties which you'd like to pass on a part of the event.
$event: {
entity: ctrl.entity
}
});
};
ctrl.cancel = function() {
ctrl.onCancel({
entity: ctrl.entity
});
};
}
app.component(componentID, {
bindings: {
onSave: '&',
onCancel: '&'
},
//Here also we pass the $event to function
template: '<h1> This is a test</h1><button type="button" ng-click="$ctrl.save($event);">Save</button>',
controller: TestFormController
})
}());