AngularJS的新手，我觉得我遇到了一些我不太理解的东西。 我有一个由UI-Boostrap模式打开的AngularJS组件。 模态主体可以包含用户可能需要/想要填写的几乎无限数量的表单。
我已经查看了其他 plunkers/posts/AngularJS 样式指南，试图找出这里的正确过程是什么。
-
我解析了一些包含表单的有效但不受信任的 HTML(一些输入/文本区域/标签/日期选择器/等...... 这些元素内部有'ng-model="$ctrl.modalData.bindings."。 我为已解析的模态数据对象提供绑定。
-
我使用$sce来提升(？)要信任的 HTML(？)。我可以使用这个来正确显示表单，但是如果不使用$compile(我认为)，我就无法将数据绑定到它们。
-
我尝试编译 html 失败。 我知道我提供的东西是错误的。 尝试了多种方法，但没有成功。
HTML 不仅需要在 init 上编译，它还通过我在这里没有定义的另一种方法进行更改。 如果我能让 $ctrl.$init() 代码工作，我可以让其余的正常工作。
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();
}]
});
模板：
<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>
我发现了这个小提琴：http://jsfiddle.net/NWZZE/6/
从这个SO帖子：角度ng-bind-html和其中的指令
同样值得注意的是非标准指令：https://github.com/incuna/angular-bind-html-compile/blob/master/angular-bind-html-compile.js
在阅读了更多内容并磨练了我的搜索之后，我在我的模块中实现了这个指令，并几乎像小提琴一样使用它。 完美工作...只要记得删除对$sce.trustAsHtml的调用。