Question

我在li标签中动态获取“sitename”，点击我想在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我也尝试过滤器但是当我添加过滤器的代码时，我甚至无法得到数据作为响应。

提前谢谢

Answer 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

Answer 2

好的，我找到了它......：）

控制器更改

在controllercode中添加$ sce（服务）

app.controller（'formCtrl'，function（$ scope，$ http，$ sce）{
  .....
  $scope.myLink = $sce.trustAsResourceUrl(response.data[0].link);
  .....});

导航功能

$ scope.navigate = function（link）{ $ scope.myLink = $ sce.trustAsResourceUrl（link）; }

如何使用Angular Js

2 个答案: