使用angularjs将源分配给iframe [英] Assign source to iframe using angularjs

查看：58 发布时间：2019/6/11 2:34:08 AngularJs

本文介绍了使用angularjs将源分配给iframe的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试将源分配给使用angularjs中的模板创建的iframe。

我正在创建一个像Horizontal选项卡组这样的选项卡结构。每个水平选项卡组都有多个垂直选项卡。每个垂直制表符都有单独的iframe。我想在选项卡点击上将源绑定到那个iframe。

这是我的aspx：

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>

在js文件中我有

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

我正在尝试在iframe中加载用户控件（.ascx）。 Result.data.d返回要加载的用户控件的路径。我想将该路径分配给iframe源并加载控件。

对于每个选项卡，使用TabName生成一个iframe作为iframe的id。

我故意不将src分配给HTML中的iframe，因为我只想在tab上点击加载控件。

什么我试过了：

我在创建标签时尝试将源分配给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.URLsrc ={{vTab.URL}}>

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

在js

app.directive（'extIframe'，[

函数（）{

返回{

限制：'E'，

范围：{

src：@，

名称：@

}，

模板：'< iframe seamless =seamlessclass =dynamicHeightwidth =100％frameborder =0src ={{\'../ SettingControls / ControlViewer.aspx？ usName = \'+ name + \'& src = \'+ src}}>< / iframe>'

};

}

]）

但这会在生成标签时加载每个用户控件，调用页面加载每个用户控件的事件，这会影响性能。我也得到了很多随机错误。

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.

使用angularjs将源分配给iframe [英] Assign source to iframe using angularjs

问题描述

推荐答案

相关文章

其他开发语言最新文章

热门教程

热门工具

登录关闭

使用angularjs将源分配给iframe [英] Assign source to iframe using angularjs

问题描述

推荐答案

相关文章

其他开发语言最新文章

热门教程

热门工具

登录 关闭

登录关闭