Shubhra Joshi Shubhra Joshi -5 years ago 794
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:

"sitename":"Tutorial Poin",

HTML Code::

<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.sitename}}</a>
<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() {
method: 'POST',
url: "../Ajax/Ajax_Mastermanagement_StudyLinks",
params: { mode: 'getData' }
}).then(function mySucces(response) {
$scope.sites =;
$scope.myLink =[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 Source

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


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


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

Working APP

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download