AngularJS dynamic iframe on click

Question

I have an input box and I need to load a url that is being typed in the input. Then once the button is clicked, I need the iframe to load the page. I tried add $sce in the controller, and it works if its hard coded only. Here is the code I have so far.

input box with button

    <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" ng-model="url" />
          <span class="input-group-btn">
            <button class="btn btn-primary btn-lg" type="button" ng-click="go(url)">Go!</button>
         </span>

controller

app.controller('browser', [
'$scope',
'$http',
'contentService',
'arrayService',
'ngAudio',
'$sce',
function($scope, $http, contentService, arrayService, ngAudio, $sce) {
    contentService.then(function(data) {
        $scope.data = data; // access all data
        $scope.links = $sce.trustAsResourceUrl("http://www.yelp.com/");

        $scope.go = function(url){
           $scope.links = url;
           console.log('links', $scope.links);
            return $scope.links;
        };


        });
    }
]);

Why is the `$scope.go` function nested inside the `.then` method of `contentService`? Where are you setting the `ng-src` attribute of the iframe? — georgeawg, May 12 '16 at 09:27
Possible duplicate of [How to set an iframe src attribute from a variable in AngularJS](http://stackoverflow.com/questions/20045150/how-to-set-an-iframe-src-attribute-from-a-variable-in-angularjs) — georgeawg, May 12 '16 at 09:28

score 1 · Answer 1 · answered May 11 '16 at 23:44

I've made a pen to get you started, I will update as needed. If you could provide the what you have for the iFrame, I'll update.

function exampleCtrl() {
  var vm = this;
  vm.go = go;
  vm.url = 'type here';

  function go(url) {
    console.log(url);
  }
}

angular
  .module('app', [])
  .controller('exampleCtrl', exampleCtrl);

<div class="container" ng-app="app" ng-controller="exampleCtrl as vm">
  <input type="text" ng-model="vm.url" />
  <button ng-click="vm.go(vm.url)">Go!</button>

</div>

AngularJS dynamic iframe on click

1 Answers1