Обновление содержимого iframe в AngularJS

Question

Я пишу приложение, которое является частью Anugular и part jQuery. Я разделяю их, загружая содержимое jQuery в iFrame.

При определенном событии (скажем, при ng-клике) мне нужно обновить iFrame. Мой контроллер содержит следующий код:

$scope.resfeshIframe = function() { //refresh the iFrame with id "anIframe" }; 

и плавающий фрейм:

<iframe id="anIframe" src="myUrl"></iframe> 

Может кто-то помочь мне с этим. Я могу опубликовать больше кода, если это необходимо.

Answer 1

Как сказал Пауло Scardine, правильный способ сделать это будет через директиву причины you shouldn't use controllers to manipulate DOM.

Что-то вроде этого можно сделать:

.directive('refreshable', [function() { 
    return { 
     restrict: 'A', 
     scope: { 
      refresh: "=refreshable" 
     }, 
     link: function (scope, element, attr) { 
      var refreshMe = function() { 
       element.attr('src', element.attr('src')); 
      }; 

      scope.$watch('refresh', function (newVal, oldVal) { 
       if (scope.refresh) { 
        scope.refresh = false; 
        refreshMe(); 
       } 
      }); 
     } 
    }; 
}]) 

которые затем могут быть использованы как:

<iframe refreshable="tab.refresh"></iframe> 

И:

$scope.refreshIframe = function(){ 
    $scope.tab.refresh = true; 
} 

Answer 2

решаемые его хака предложил в Reload an iframe with jQuery

$scope.resfeshIframe = function() { 
    var iFrame = $document.find("anIframe"); 
    iFrame.attr("src",iFrame.attr("src")); 
}; 

Answer 3

Если вы хотите, чтобы обновить все плавающие фреймы от вашего страница:

var refreshAllIframes = function(){ 
     var iFrames = $document.find('iframe'); 
     for(var i = 0; i < iFrames.length; i++){ 
     refreshFrame(i,iFrames); 
     } 
    } 

    var refreshFrame = function(i,iFrames){ 
     iFrames[i].src = iFrames[i].src; 
    } 

Answer 4

Другое решение hack-ish: если вы не хотите создавать директиву, но хотите придерживаться хороших практик не манипулирования DOM в контроллере. Держите URL в массив и использование нг-повтора для визуализации IFrame: Вид:

<iframe ng-repeat="url in vm.url" ng-src="{{url}}" /> 

Контроллер:

vm.url = ['http://google.com']; 

Таким образом, каждый раз, когда вы установите значение vm.url, угловой будет повторно отображать iFrame.

Answer 5

Я сделал это в угловых 2 вроде:

import { Component, ViewChild, ElementRef } from '@angular/core'; 
 
@Component({ 
 
    selector: 'myHTMLContainer', 
 
    template: `<iframe #ifr ></iframe>` 
 
    }) 
 

 
export class HTMLContainerComponent implements OnInit { 
 
    @ViewChild('ifr') ifr: ElementRef; 
 
    
 
    //call setURL function whenever you want to change the iframe's src 
 
    setURL(url:string) { 
 
     this.ifr.nativeElement["src"] = url; 
 
    }