如何在AngularJs中使用iframe创建指令答案

【问题标题】：How to create directive with iframe inside in AngularJs如何在AngularJs中使用iframe创建指令
【发布时间】：2021-07-18 23:40:33
【问题描述】：

我正在尝试创建将来自外部源的地图嵌入 iframe 的指令，源是静态的，但参数将绑定到指令，并且可以由控制器控制，使 iframe 通过发送的新参数重新渲染实时。

代码：

    angular.module('Utilities').directive('gisMap', [
    '$sce',
    function ($sce) {
        return {
            scope: {
                location: '=',
            },
            restrict: 'EA',
            transclude: true,
            replace: true,
            template: '<iframe src="{{ trustedUrl }}" frameborder="0" height="500" allowfullscreen="true" location="{{vm.location}}></iframe>',
            link: function (scope, element, attrs) {
                scope.trustedUrl = $sce.trustAsResourceUrl('https://myExternalGIS.com?find={{location}}');
            },
            controller: [
                '$scope',
                '$element',

                function ($scope, $element) {                  
                    var self = this;
                    if ($scope.location=="") return;
                },
            ],
            controllerAs: 'vm',
            bindToController: true,
        };
    },
]);

HTML：

<gis-map location="{{self.location}}"></gis-map>

我收到错误：

错误：[$compile:tplrt] 指令“gisMap”的模板必须有正好是一个根元素。

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

当使用模板（或 templateUrl）声明指令并打开替换模式时，模板必须只有一个根元素。也就是说，模板属性的文本或 templateUrl 引用的内容必须包含在单个 html 元素中。例如，blah blah blah 而不是简单的blah blah blah。否则，替换操作将导致单个元素（指令）被多个元素或节点替换，这是不受支持的，并且在实践中通常不需要。

尝试删除：replace: true,

还可以尝试修复location="{{vm.location}} 属性。它缺少一个尾随引号。

有关详细信息，请参阅

AngularJS Error Reference - $compile:tplrt

【讨论】：