Pretty new to AngularJS and I feel like I've hit something I don't quite understand. I have a AngularJS component that is opened by a UI-Boostrap modal. The modal body can contain a nearly infinite number of forms that the user may need/want to fill out.
I've looking at other plunkers/posts/AngularJS styleguide trying to figure out what the correct process here is.
I resolve some valid but untrusted HTML which contains the form (some inputs/textareas/labels/datepickers/etc...). These elements have 'ng-model="$ctrl.modalData.bindings." inside of them. I supply the bindings to the modalData object that is resolved.
I use $sce to elevate(?) the HTML to be trusted(?). I can get the forms to display correctly using just this, but I can't data-bind to them without using $compile (I think).
I try unsuccessfully to compile the html. I understand what I've provided is wrong. Tried multiple ways with no success.
The HTML doesn't just need to be compiled on init, it changes through another method I haven't defined here. If I can get the $ctrl.$init() code working I can get the rest working.
angular.module('cfv')
.component('myModal', {
templateUrl: '../IssueModal.template.html',
bindings: {
modalInstance: "<",
resolve: "<"
},
controller: [
'$sce',
'$compile',
'formRenderingService',
function($sce, $compile, formRenderingService: FormRenderingService) {
var $ctrl = this;
$ctrl.$init = () => {
$ctrl.width = 800;
$ctrl.modalData = $ctrl.resolve.modalData;
$ctrl.formHtml = $sce.trustAsHtml($ctrl.modalData.formHtml);
$compile($ctrl.formHtml);
let $modalContent = angular.element(document).find('.modal-content');
$modalContent[0].style.width = $ctrl.width + 30 + 'px'; // TODO: Can't find a better way to access the content border for dynamic sizing...
}
$ctrl.handleClose = () => {
$ctrl.modalInstance.close($ctrl.selectedSource);
};
$ctrl.handleDismiss = () => {
$ctrl.modalInstance.dismiss("cancel");
};
$ctrl.$init();
}]
});
Template:
<div class="modal-body" style="border: thin; border-color: lightgrey; border-left: none; width: 70%; padding: 0;">
<div style="height: 465px; width: 100.2%; border: none; border-bottom:solid; border-bottom-color:lightgrey; border-bottom-width:thin;">
<h3 class="bwc-text-title" style="margin-left: 20px; margin-top: 15px; margin-bottom: 10px; display:inline-block">Issue Details</h3>
<button class="bwc-buttons-hollow" type="button" style="border: none; font-weight: 600; font-size:18px; position: absolute; right: 12px; top: 12px;" ng-click="$ctrl.handleDismiss()">X</button>
<div ng-bind-html="$ctrl.formHtml" style="padding-left: 10px;"></div>
</div>
<div style="position: absolute; bottom: 15px; right: 15px">
<button class="bwc-buttons-hollow" type="button" style="margin-right: 10px" ng-click="$ctrl.handleClose()">Edit</button>
</div>
</div>
