iFrame Source with Angular Markup

Question

I want to use an Angular markup to pull a URL from a database and insert it into the source of an iframe. This is with what I'm presently working:

<iframe ngSrc="{{post.url}}" width="300" height="80" frameborder="0" allowtransparency="true"></iframe>

When looking at Elements in Dev Tools, the URL string appears properly. However, the iframe does not render on the page.

EDIT: I found an example on Plunker that sort of works. The problem I'm having now is that it is assigning everything to the last url. Is there a way to differentiate them? This is my adaptation:

app.js

app.controller('MainController', ['$http', '$scope', '$sce', function($http, $scope, $sce) {

 this.allPosts = [];


 this.getAllPosts = () => {
   $http({
     url: "/posts", method: "get"
   }).then(response => {
     this.allPosts = response.data;
     for (let post of this.allPosts) {
       $scope.trustSrc = function(src) {
         return $sce.trustAsResourceUrl(src)
       }
       $scope.track = {
         src: post.url
       }
     }
     console.log(this.allPosts);
   }, ex => {
     console.error(ex.data.err);
     this.error = ex.statusText;
   }).catch(err => this.error = "Server broke?");
 };

html

<div class="all_posts" ng-repeat="post in ctrl.allPosts | filter: searchBox" ng-click="ctrl.getOne(post)">  
  <div class="one_post">
    <div class="embedded_song">

      <iframe ng-src="{{trustSrc(track.src)}}" width="300" height="80" type="text/html" frameborder="0" allowtransparency="true"></iframe>
      {{ post.artist }} -
      <a href="/one_post/">{{ post.songTitle }}</a>
      <a href={{post.url}} target="blank">Listen here</a>
    </div>

    <!-- Submitted By -->
    <div class="post_content">
      submitted by: {{post.user.username}}<br>
      <!-- Optional Text Box? -->
    </div>

    <!-- Tags -->
    <div class="tag_area">
      <div class="post_tags" ng-repeat="tag in post.tag">
        <button class="post_tag">#{{tag}}</button>
      </div>
    </div>

</div>

I did this previously, and I think I ended up creating a directive that created the full iframe markup as a child element. — Bryan Euton, Dec 22 '17 at 02:27

score 0 · Answer 1 · answered Dec 22 '17 at 02:55

0

ngSrc isn't a proper Angular (2+) directive, it is an AngularJS (1.x) directive. The propert formatting for Angular is:

<iframe [src]="post.url" width="300" height="80" frameborder="0" allowtransparency="true"></iframe>

Where [ ... ] indicates a dynamic value, and "post.url" refers to the component variable.

This question has several answer that are similar to your question, but refer to img instead of iframe explain the idea.

answered Dec 22 '17 at 02:55

Z. Bagley

8,942
1
40
52

I tried using that, and no dice. No errors, either. – anth0nyj Dec 22 '17 at 03:26
what is console.log value of post.url? – Z. Bagley Dec 22 '17 at 03:38
Also, have you tried this: https://stackoverflow.com/questions/38037760/how-to-set-iframe-src-in-angular-2-without-causing-unsafe-value-exception – Z. Bagley Dec 22 '17 at 03:45
That is waaaaaaay above my skill level. I'm posting an update. I appreciate your assistance thus far. – anth0nyj Dec 22 '17 at 04:43
You're mixing up AngularJS with Angular a whole lot there man. If you google, be sure to include `-angularjs` in your search – Z. Bagley Dec 22 '17 at 05:11
Yeah, I've honestly been attempting to cobble together various solutions I've found on the internet. – anth0nyj Dec 22 '17 at 05:13

iFrame Source with Angular Markup

1 Answers1