Question

我想使用Angular标记从数据库中提取URL并将其插入到iframe的源中。这与我目前的工作有关：

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

在Dev Tools中查看Elements时，URL字符串会正确显示。但是，iframe不会在页面上呈现。

编辑：我在Plunker上找到了一个有用的例子。我现在遇到的问题是它将所有内容分配给最后一个网址。有没有办法区分它们？这是我的改编：

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>

Answer 1

ngSrc不是一个正确的Angular（2+）指令，它是一个AngularJS（1.x）指令。 Angular的属性格式为：

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

[ ... ]表示动态值，"post.url"表示组件变量。

This question有几个与您的问题相似的答案，但请参考img而不是iframe来解释这个想法。

具有Angular Markup的iFrame源代码

1 个答案: