How to create directive with iframe inside in AngularJs

Question

I am trying to create directive that will embed map from external source in an iframe, source is static but parameter will be bind to the directive and can be controlled by the controller makeing the iframe re-render by the new parameter sent in real time.

Code:

    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>

I got error:

Error: [$compile:tplrt] Template for directive 'gisMap' must have exactly one root element.

georgeawg · Accepted Answer · 2021-04-25 19:52:08Z

1

When a directive is declared with template (or templateUrl) and replace mode on, the template must have exactly one root element. That is, the text of the template property or the content referenced by the templateUrl must be contained within a single html element. For example, blah blah blah instead of simply blah blah blah. Otherwise, the replacement operation would result in a single element (the directive) being replaced with multiple elements or nodes, which is unsupported and not commonly needed in practice.

Try removing: replace: true,

Also try fixing the location="{{vm.location}} attribute. It is missing a trailing quote mark.

For more information, see

AngularJS Error Reference - $compile:tplrt

answered Apr 25, 2021 at 19:52

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to create directive with iframe inside in AngularJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related