如何在AngularJs中创建内部带有iframe的指令

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

代码：

angular.module（'Utilities'）.directive（'gisMap'[
“$sce”，
功能（$sce）{
返回{
范围：{
位置：'='，
},
限制：“EA”，
是的，
替换：正确，
模板：'
使用模板（或templateUrl）声明指令时如果启用“替换模式”，则模板必须只有一个根元素。也就是说，模板属性的文本或templateUrl引用的内容必须包含在单个html元素中。例如，
blah blah blah
而不是简单的
blah blah blah
。否则，替换操作将继续进行lt在单个元素（指令）中被多个元素或节点替换，这是不受支持的，在实践中通常不需要

尝试删除：
replace:true，

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

有关详细信息，请参阅




    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,
        };
    },
]);

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