CODEWITHSUNDEEP
angularjsangularjs-directive
yanivz
yanivz

Reputation: 158

How to create directive with iframe inside in AngularJs

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.

Upvotes: 0

Views: 190

Answers (1)

georgeawg
georgeawg

Reputation: 48968

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, <p>blah <em>blah</em> blah</p> instead of simply blah <em>blah</em> 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

Upvotes: 1

Related Questions