Click here to Skip to main content
15,922,407 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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:
HTML
<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
JavaScript
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.


<ext-iframe ng-if="vTab.URL" src="{{vTab.URL}}">


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.
Posted
Updated 6-Nov-16 22:47pm
Comments
F-ES Sitecore 22-Apr-16 5:19am    
An iframe is just a browser within a browser, of course it's going to trigger page_load etc, it's no different from opening the url in a new tab.
Lokesh Zende 22-Apr-16 5:36am    
Yes. And that is why I want to assign the source on tab click.
F-ES Sitecore 22-Apr-16 5:46am    
I doubt that will make any difference at all.
Lokesh Zende 22-Apr-16 6:02am    
Yes it does. I am saying because I have already tried that.

maybe you can use this as analogy :

directive would be created when condition is equal.

this is example how to inactivated directive, and activated when item clicked

in controller :

vm.multipleSelectedItems = [
{ label: 'Display 0', value: 0 },
{ label: 'Display 1', value: 1 },
{ label: 'Display 2', value: 2 }
];

in html :
HTML
<ul class="nav nav-tabs nav-stacked" ng-repeat="item in profileCtrl.multipleSelectedItems  track by $index">
    <li ng-class="{active: toTop[item.value]==item.value}">
        <button type="submit" class="text-left" ng-click="toTop[item.value]=(toTop[item.value]==item.value?-1:item.value)"><i class="fa fa-pencil-square-o fa-fw"></i>&nbsp;{{item.label}}
        </button>
    </li>
    <div ng-switch="item.value">
        <directive1 ng-switch-when="0" ng-if="toTop[item.value]==item.value"></directive1>
        <directive1 ng-switch-when="1" ng-if="toTop[item.value]==item.value"></directive1>
        <directive1 ng-switch-when="2" ng-if="toTop[item.value]==item.value"></directive1>
    </div>
</ul>


it works for me.

hope this help


regards,
yoyo
 
Share this answer
 
Comments
Lokesh Zende 7-Nov-16 4:46am    
Thanks Setyo. Will give it a try. Meanwhile check my answer.
Modified the JavaScript setActive function a little bit..and it works.

JavaScript
//Set tab active on click of tab.
$scope.setActive = function (tab, isHorizontal) {
    try {
        if (typeof tab !== 'undefined' && tab !== null) {
            if (tab.active)
                return;
            var tabDirection;
            if (isHorizontal) tabDirection = 'H';
            else tabDirection = 'V'
            tab.active = true;
            tab.loaded = true;
            activeTabCaption = tab.TabName;

            if (tabDirection == $scope.TabOrientation.Horizantal)  //horizontal tab as active tab in persistent storage
                $scope.SetActiveTab($scope.TabOrientation.Horizantal, tab.TabGroupName);
            else  //vertical tab as active tab in persistent storage
                $scope.SetActiveTab($scope.TabOrientation.Vertical, tab.TabName);

            if ($scope['current' + tabDirection + 'Tab']) {
                $scope['current' + tabDirection + 'Tab'].active = false;
            }
            $scope['current' + tabDirection + 'Tab'] = tab;
            if (isHorizontal) {
                var vTab = $scope.GetActiveTabObject($scope.TabOrientation.Vertical);//get vertical active tab from persistence storage
                $scope.setActive(vTab, false);
                $scope.$apply();
            }
            else {
                $scope.KeepSessionLive(); //extend session time out...
            }
        }
    }
    catch (ex) {
        alert(ex.message);
    }
}
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900