title: How to create directive with iframe inside in AngularJs
body: <p>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.</p>
  <p>Code:</p>
  <pre><code>    angular.module('Utilities').directive('gisMap', [
      '$sce',
      function ($sce) {
          return {
              scope: {
                  location: '=',
              },
              restrict: 'EA',
              transclude: true,
              replace: true,
              template: '&lt;iframe src=&quot;{{ trustedUrl }}&quot; frameborder=&quot;0&quot; height=&quot;500&quot; allowfullscreen=&quot;true&quot; location=&quot;{{vm.location}}&gt;&lt;/iframe&gt;',
              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==&quot;&quot;) return;
                  },
              ],
              controllerAs: 'vm',
              bindToController: true,
          };
      },
  ]);
  </code></pre>
  <p>HTML:</p>
  <pre><code>&lt;gis-map location=&quot;{{self.location}}&quot;&gt;&lt;/gis-map&gt;
  </code></pre>
  <p>I got error:</p>
  <blockquote>
  <p>Error: [$compile:tplrt] Template for directive 'gisMap' must have
  exactly one root element.</p>
  </blockquote>