AngularJS 1.5 绑定和编译 html 到模态

Posted 2023-02-23

【中文标题】AngularJS 1.5 绑定和编译 html 到模态

【英文标题】：AngularJS 1.5 bind and compile html to modal

【发布时间】：2018-08-30 01:46:46

【问题描述】：

AngularJS 很新，我觉得我遇到了一些我不太理解的东西。我有一个由 UI-Boostrap 模式打开的 AngularJS 组件。模态体可以包含用户可能需要/想要填写的几乎无限数量的表格。

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

我解析了一些有效但不受信任的 html，其中包含表单（一些输入/文本区域/标签/日期选择器/等...）。这些元素有 '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>

【参考方案1】：

我找到了这个小提琴：http://jsfiddle.net/NWZZE/6/

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

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

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