如何使用 Angular Js 在一个 iframe 中设置变量 ng-src答案

【问题标题】：How to set variable ng-src within one iframe using Angular Js如何使用 Angular Js 在一个 iframe 中设置变量 ng-src
【发布时间】：2016-12-06 03:18:16
【问题描述】：

我在 li 标签中动态获取“站点名称”，点击后我想在 iframe 中打开“链接”。

我在响应中得到的以下 json 格式数据
响应数据：

   [{
       "SrNo":1,
       "id":1,
       "sitename":"Tutorial Poin",
       "link":"http://www.tutorialspoint.com",
    },
    {
        "SrNo":2,
        "id":6,
        "sitename":"W3Schools",
        "link":"http://www.w3schools.com",
     },]

 HTML Code::

 <tr>
 <td style="width: 11%; vertical-align: top;">
    <ul id="ultabs" ng-model="ultabs">
      <li ng-repeat="site in sites">
      <a href="#frameDiv" ng-click="navigate(site.link)">{{site.sitename}}</a>
      </li>
    </ul>
      </td>
      <td style="width: 80%; vertical-align: top; text-align: left;">
        <div id="frameDiv" style="margin-top: 5px;">
        <iframe id="Iframe" ng-model="Iframe" ng-src="{{myLink}}"></iframe>
        </div>    </td></tr>

Conroller code::

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

                    //app.filter('trustAsResourceUrl', ['$sce', function ($sce) {
                        //    return function (val) {
                        //        return $sce.trustAsResourceUrl(val);
                        //    };
                        //}])
                        app.controller('formCtrl', function ($scope, $http) {
                            (function init() {
                                $http({
                                    method: 'POST',
                                    url: "../Ajax/Ajax_Mastermanagement_StudyLinks",
                                    params: { mode: 'getData' }
                                }).then(function mySucces(response) {
                                    $scope.sites = response.data;
                                    $scope.myLink = response.data[0].link;
                                }, function myError(response) {
                                    $scope.message = response.statusText;
                                });
                            })();

                            $scope.navigate = function (link) {
       /* $('#Iframe').attr("src",link);<==This codeworking well,But i want to set "ng-src" attribute in iframe using AngularJs.*/
                            }
                        });

为了在 iframe 中获取 ng-src，我也尝试了过滤器，但是当我添加过滤器的代码时，我什至无法获得响应数据。

提前谢谢你

【问题讨论】：

能否请您创建一个小提琴或 plunker 来重现该问题。通过查看它应该可以工作的代码！

标签： jquery angularjs iframe

【解决方案1】：

您可以定义一个函数并将 url 传递给它，

JS：

 $scope.trustSrc = function(src) {
        return $sce.trustAsResourceUrl(src);
    }

HTML：

    <md-button ng-click="selectMuppet(it)" ng-class="{'selected' : it === selected }">
     <img ng-src="{{trustSrc(it.link)}}" class="face" alt="">
      {{it.sitename}}
   </md-button>

工作APP

【讨论】：

谢谢你，先生，但是我在这里使用 iframe，我不能使用“链接”或“站点名”，因为我在
标签中使用了 ng-repeate，所以我不能直接使用“链接” " 在 iframe 中

@ShubhraJoshi 我不明白你

先生可能是你给了我正确的答案，但我不知道如何在我的代码中实现..先生，我在开发和 angularjs 中都是新手.. 在这里我使用了“ng-repeat=

标记中的站点中的站点”然后我认为我仅在

标记中使用了“site.link”或“site.sitename”，但是作为您的解决方案，您建议我在