J'écris une application qui fait partie angulaire et partie jQuery. Je les séparez en chargeant la teneur en jQuery dans un iframe.
sur un certain événement (disons, sur un clic NG), j'ai besoin de rafraîchir l'iframe. Mon contrôleur contient le code suivant: et l'iframe est:
5 Réponses :
résolu par un piratage suggéré dans Recharger un iframe avec jQuery
$scope.refreshIframe = function() {
var iFrame = $document.find("anIframe");
iFrame.attr("src",iFrame.attr("src"));
};
Toute façon de le faire via ng-modèle sans $ document ?
Je suppose que la bonne façon de le faire consiste à utiliser une directive.
Comme Paulo Scardine dit, la bonne façon de le faire serait via une cause de directive cause Vous ne devez pas utiliser Contrôleurs à manipuler DOM .
Quelque chose comme celui-ci pourrait faire: qui pourrait ensuite être utilisé comme: et:
Quand j'essaie ceci, je reçois une erreur indiquant que "TypeError: impossible de définir la propriété" Actualiser "de non défini" Avez-vous besoin de définir "Tab" de manière particulière?
Non, allez simplement avec $ portée.tab = {}; sur contrôleur init. Vous pouvez également utiliser une autre variable comme $ Portée.whateToutwant .
Merci Florian. L'initialisation variable a effectivement disparu!
Cela ne fonctionne pas lorsque le SRC de l'IFRAME est chargé de manière dynamique avec NG-SRC. Je crois que Angular ne rechargera que l'IFrame si la valeur change et la définition de la valeur avec la valeur actuelle n'entraîne pas de rechargement.
Si vous souhaitez actualiser tous les iframes de votre page:
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;
}
Une autre solution Hack-ISH: Si vous ne voulez pas créer de directive, mais vous voulez vous tenir aux bonnes pratiques de ne pas manipuler le DOM dans le contrôleur.
Gardez l'URL dans un tableau et utilisez NG-REPEAT pour rendre l'iframe:
Vue: contrôleur: Donc, chaque fois que vous définissez la valeur du vm.url, angulaire rendant la rendu iframe.
Beau truc homme! MERCI
Je l'ai fait en angulaire 2 comme celle-ci:
p>
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;
}