AngularJS 1.5 绑定并编译 html 到模态

Question

对 AngularJS 很陌生，我觉得我遇到了一些我不太明白的东西。我有一个由 UI-Boostrap 模态打开的 AngularJS 组件。模态主体可以包含几乎无限数量的表单，用户可以 need/want 填写这些表单。

我查看了其他 plunkers/posts/AngularJS 风格指南，试图弄清楚这里的正确流程是什么。

我解析了一些有效但不受信任的 HTML，其中包含表单（一些 inputs/textareas/labels/datepickers/etc...）。这些元素有 'ng-model="$ctrl.modalData.bindings."在他们里面。我将绑定提供给已解析的 modalData 对象。
我使用 $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>

Answer 1

我找到了这个 fiddle：http://jsfiddle.net/NWZZE/6/

来自这个 SO post：angular ng-bind-html and directive within it

另外值得注意的是 non-standard 指令：https://github.com/incuna/angular-bind-html-compile/blob/master/angular-bind-html-compile.js

在阅读更多内容并磨练我的搜索之后，我在我的模块中实现了这个指令，并且几乎完全像 Fiddle 一样使用它。完美运行...请记住删除对 $sce.trustAsHtml.

的调用

AngularJS 1.5 绑定并编译 html 到模态

AngularJS 1.5 bind and compile html to modal

angularjs

angularjs-1.5