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

Question

我试图创建指令，它将从外部源嵌入映射到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>

我有错误：

错误:指令“gisMap”的$compile:tplrt模板必须有一个根元素.

Answer 1

当使用模板(或templateUrl)声明指令并打开替换模式时，模板必须有一个根元素。也就是说，模板属性的文本或templateUrl引用的内容必须包含在单个html元素中。例如，<p>blah <em>blah</em> blah</p>而不是简单的blah <em>blah</em> blah。否则，替换操作将导致将单个元素(指令)替换为多个元素或节点，这些元素或节点在实践中不受支持，并不常见。

尝试删除：replace: true,

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

有关详细信息，请参阅

• AngularJS Error Reference - $compile:tplrt