Assign source to iframe using angularjs

See more:

AngularJs

Hi,
I am trying to assign source to iframe created using template in angularjs.
I am creating a tab structure like Horizontal tab group. Each Horizontal tab group will have number of vertical tabs. Each vertical tab will have separate iframe. I want to bind source to that iframe on tab click.

This is my aspx:

<div ng-app="myApp">
        <div ng-controller="MainCtrl">
    <div class="tabbable padTop10">
      <ul class="nav nav-tabs">
        <li ng-repeat="hTab in horzTabs track by $index" ng-class="{'active':hTab.active}"><a ng-click="setActive(hTab, true);">{{hTab.TabGroupName}}</a></li>
      </ul> 

      <div class="tab-content">
        <div class="tab-pane" ng-class="{'active': hTab.active}" ng-repeat="hTab in horzTabs track by $index">
          <div ng-if="hTab.TabInfo"  class="tabbable tabs-left">
            <ul class="nav nav-tabs">
              <li ng-repeat="vTab in hTab.TabInfo track by $index" ng-class="{'active':vTab.active }">
                  <a ng-click="setActive(vTab, false);">{{vTab.TabCaption}}</a>
              </li>
            </ul>
              <div class="tab-content">
                <div class="tab-pane" ng-repeat="vTab in hTab.TabInfo track by $index" ng-class="{'active': vTab.active}">
                    <ext-iframe ng-if="vTab.URL" id="{{vTab.TabName}}" src=""></ext-iframe>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

In js file I have

var app = angular.module('myApp', []);

app.controller('MainCtrl', function ($scope, $sce, $http) {
    $scope.iMainTabIndex = 0;

    $scope.horzTabs = tabCollection;
    $scope.currentHTab = $scope.horzTabs[$scope.iMainTabIndex];
    $scope.currentHTab.active = true;
    $scope.currentVTab = $scope.currentHTab.TabInfo[0];
    $scope.currentVTab.active = true;

$scope.setActive = function (tab, horz) {
        var tabdir;
        if (horz) tabdir = 'H';
        else tabdir = 'V'
        tab.active = true;
        if ($scope['current' + tabdir + 'Tab']) {
            $scope['current' + tabdir + 'Tab'].active = false;
        }
        $scope['current' + tabdir + 'Tab'] = tab;

        if(horz && tab.URL.length > 0) 
        {
        }
        else if(horz && tab.URL.length == 0)
        {
        }
        else
            $scope.loadTab(tab.Type, tab.URL);
    }


    angular.element(document).ready(function () {
        $scope.loadTab($scope.currentVTab);
    });


    $scope.loadTab = function (tab) {
        if (tab.URL != 'undefined' && tab.URL.length > 0)
            var controlName = tab.URL.substring(2, tab.URL.length);

        var iframeName = controlName.substring(0, controlName.length - 5);

        if (tab.Type == '0') {

            $http.post("../AdminView/Settings.aspx/Result", { 'controlName': controlName }).then(function (result) {
                $(iframeName).attr("src", result.data.d);
            },
            function myError(result) {
                alert(response.statusText);
            });

        } else {
            $(iframeName).attr("src", url);
        }

    }
});

app.directive('extIframe', [

    function () {
        return {
            restrict: 'E',
            scope: {
                "name": "@",
                "id": "@",
                "src":"@"
            },
            template: '<iframe seamless="seamless" width="100%" frameborder="0" id="{{id}}" src={{src}} name={{name}}></iframe>'
        };
    }
])

I am trying to load an user control (.ascx) in iframe. Result.data.d returns me the path of the user control to load. I want to assign that path to iframe source and load the control.

For each tab, one iframe is generated with TabName as id of the iframe.
I am purposely not assigning src to iframe in HTML because I want to load the control on tab click only.

What I have tried:

I tried assigning the source to iframe when tabs are created.



In js
app.directive('extIframe', [

function () {
return {
restrict: 'E',
scope: {
"src": "@",
"name": "@"
},

template: '<iframe seamless="seamless" class="dynamicHeight" width="100%" frameborder="0" src="{{\'../SettingControls/ControlViewer.aspx?usName=\' + name + \'&src=\' + src}}"></iframe>'
};
}
])

But this loads each user control when tabs are generating, calling page load event of each user control, which affects the performance. I also get so many random errors.