Shubhra Joshi Shubhra Joshi - 4 months ago 135
AngularJS Question

How to set variable ng-src within one iframe using Angular Js

I was get "sitename" Dynamically in li tag ,on click of that i want to open "link" in iframe.

The Following json formated data i got in response

Data in response:


[{
"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.*/
}
});



to get ng-src in iframe I also try the Filter But when I add filter's code then I even can't got the data in response.

Thank you in advance

Answer

You can have a function defined and pass the url to it,

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>

Working APP