Question

我正在使用指令在iframe和iframe中设置html，css和javascript代码。这些iframe位于ng-repeat内，因此每个结果都有一个iframe。

然后按标题和排序标题或日期过滤这些结果。

所以，我有两个问题：

Firefox没有显示iframe html代码，但其他浏览器都是。
选择排序选项后，标题和日期会正确刷新，但iframe内容不会。

以下是Plunker的链接：http://plnkr.co/edit/Kvsbir?p=info

这是我的代码：

<body ng-controller="HomeController">
    <div class="panel-heading   text-center">
      <h3>Projects</h3>
      <form action="" class="form-inline">
        <div class="form-group">
          <input class="form-control" type="text" ng-model="query.name" placeholder="Search...">
        </div>
        <div class="form-group dropdown">
          <select class="btn btn-default dropdown-toggle" type="text" ng-model="sortOrder" ng-options="item.value as item.text for item in sortOptions"></select>
        </div>
      </form>
    </div>
    <div class="panel-body">
      <div ng-model="result" ng-repeat="project in projects | orderBy:sortOrder | filter:query.name" class="col-md-4 col-sm-6">
        <div class="single-pen">
          <div class="meta">
            <h3>{{project.title}}</h3>
            <h6> {{project.created_at | date}} </h6>

          </div>
          <div class="iframe-wrap">
            <div theframe="project"></div>
          </div>
        </div>
      </div>
    </div>
  </body>

控制器

var app = angular.module('plunker', []);

app.controller('HomeController', function ($rootScope,$filter, $scope) {
  'use strict';
  var vm = this;
  // Filter & sort
  $scope.sortOptions  = [
    { value: "-created_at", text: "Ordenar by Date"},
    { value: "title", text: "Ordenar by Title"}
  ];

  $scope.sortOrder  = $scope.sortOptions[0].value;
  $scope.result = [
    {
      title: 'Project 1',
      code: [{
        css: "body{background-color: pink;}",
        html: "<h1>Hello</h1>",
        js: ""
      }],
      created_at: "2016-02-06T22:52:24.900Z"
    },
    {
      title: 'Project 2',
      code: [{
        css: "body{background-color: blue;}",
        html: "<h1>Hello</h1>",
        js: ""
      }],
      created_at: "2016-02-10T11:52:33.055Z"
    },
    {
      title: 'Project 3',
      code: [{
        css: "body{background-color: yellow;}",
        html: "<h1>Hello</h1>",
        js: ""
      }],
      created_at: "2016-02-06T22:52:24.900Z"
    },
    {
      title: 'Project 4',
      code: [{
        css: "body{background-color: orange;}",
        html: "<h1>Hello</h1>",
        js: ""
      }],
      created_at: "2016-02-08T11:52:33.055Z"
    },
    {
      title: 'Project 5',
      code: [{
        css: "body{background-color: red;}",
        html: "<h1>Hello</h1>",
        js: ""
      }],
      created_at: "2016-02-01T13:46:33.917Z"
    },
  ];
  $scope.projects = $scope.result;




})

.directive('theframe', function($compile){

  return {
    restrict: 'A',
    scope: {
       theframe: '='
    }, 
    template: '<iframe id="frame" scrolling="no"></iframe>',   
    link: function($scope, element, attrs) {

        var $head = $(element).find('#frame').contents().find('head');          
        var $body = $(element).find('#frame').contents().find('body');
        $scope.$watch('projects', function(n,o){
          $head[0].innerHTML = '<style>'+$scope.theframe.code[0].css+'</style>';
          $body[0].innerHTML = $scope.theframe.code[0].html + '<script> (function(){ \n' + $scope.theframe.code[0].js + '\n})();</script>';
        }, true);

    }    

  }
})

任何有关原因无法正常工作的提示？

修改

解决了Firefox问题！

感谢$ timeout的想法。

这就是我改变了：http://plnkr.co/edit/Kvsbir?p=preview

.directive('theframe', function($compile, $timeout){

  return {
    restrict: 'A',
    scope: {
       theframe: '='
    }, 
    template: '<iframe id="frame" scrolling="no"></iframe>',   
    link: function($scope, element, attrs) {

        var $head = $(element).find('#frame').contents().find('head');          
        var $body = $(element).find('#frame').contents().find('body');
        var timeout = setInterval(function(){

          $head[0].innerHTML = '<style>'+$scope.theframe.code[0].css+'</style>';
          $body[0].innerHTML = $scope.theframe.code[0].html + '<script> (function(){ \n' + $scope.theframe.code[0].js + '\n})();</script>';

          $scope.$apply();
        }, 500);   
    }    
  }
})

在AngularJS指令中，iframe内容未正确刷新

0 个答案: