Назначьте источник iframe с помощью angularjs

---

Привет,
Я пытаюсь назначить источник iframe, созданному с помощью шаблона в angularjs.
Я создаю структуру вкладок, подобную горизонтальной группе вкладок. Каждая горизонтальная группа вкладок будет иметь несколько вертикальных вкладок. Каждая вертикальная вкладка будет иметь отдельный iframe. Я хочу привязать источник к этому iframe на вкладке click.

Это мой 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>

В js файле у меня есть

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

Я пытаюсь загрузить пользовательский элемент управления (. ascx) в iframe. Result.data.d возвращает мне путь к пользовательскому элементу управления для загрузки. Я хочу назначить этот путь источнику iframe и загрузить элемент управления.

Для каждой вкладки генерируется один iframe с именем TabName в качестве идентификатора iframe.
Я намеренно не назначаю src iframe в HTML, потому что хочу загрузить элемент управления только на вкладке click.

Что я уже пробовал:

Я попытался назначить источник iframe при создании вкладок.



В js
app. directive ('extIframe', [

функция () {
вернуть {
ограничение: 'E',
масштаб: {
"src": "@",
"имя": "@"
},

шаблон: в '<iframe из бесшовных="бесшовные" класс="свойство dynamicheight" ширина="100%" frameborder="0" СРЦ="{{\'../SettingControls/ControlViewer.аспн?usName=\' + имя + \'&амп;в src=\' + РКЦ}}"&ГТ;&ЛТ;/iframe из&ГТ;'
};
}
])

Но это загружает каждый пользовательский элемент управления при генерации вкладок, вызывая событие загрузки страницы каждого пользовательского элемента управления, что влияет на производительность. Я также получаю так много случайных ошибок.

---