2015-04-21 16 views
10

Ich habe dieses Problem, dass ich nicht herausfinden kann, was passiert: Ich benutze Angular und es ist Routing-Mechanismus.Neu laden der Seite auf FF nicht ändern Seite

so habe ich eine url:

<a href="#/videos/detail/{{video.Id}}" onclick="location.reload();"> 
    <div class="card-image"> 
     <img ng-src="{{video.ThumbnailUrl?video.ThumbnailUrl:'img/images.png'}}" src="" /> 
    </div> 
</a> 

Wie Sie ein onclick="location.reload(); es funktioniert dies auf Chrome und IE9 sehen können. Aber auf FF es tut folgendes:

  1. Klicken Sie auf den Link
  2. Die aktualisierte URL get
  3. The location.reload() bekommen die eine so genannte Seite aktualisiert wird
  4. Die URL und Winkelansicht, go zurück auf die Seite, wo der Link
  5. Beim Drücken ‚F5‘ die aktuelle Seite und die uRL geklickt wird geladen werden in

ich habe auch versuchttunfür wenn vielleicht die Route im Cache war oder so, aber kein Glück.

Falls Sie sich fragen, warum die Aktualisierung und Speicherort: Ich muss die Seite für ein Plugin neu laden (wegen eines Fehlers in es) und diese Methode war das erste, was ich mir vorstellen konnte.

EDIT: Schließlich durch eine Kombination von Angular und einige Jquery getan;

So sah das endgültige HTML so aus;

<a href="#" class="prevent" ng-click="redirectwithreload('# />videos/detail/'+video.Id)" > 
    <div class="card-image"> 
     <img ng-src="{{video.ThumbnailUrl?video.ThumbnailUrl:'img/images.png'}}" src="" /> 
    </div> 
</a> 

Die Richtlinie sah aus wie dieses

.directive('videoCard', function() { 
    return { 
     restrict: 'E', 
     templateUrl: 'partials/directives/video-card.html', 
     controller: function ($scope, $element, $location) { 
      $scope.redirectWithReload = function (url) { 
       var toUrl = location.href.split('#')[0] + url; 
       location.replace(toUrl); 
      } 
     }, 
     compile: function() { 
      return { 
       post: function() { 
        $('a.prevent').click(function (e) { 
         e.preventDefault(); 
        }); 
       } 
      } 
     } 
    }; 
}) 

die Klasse prevent nur war für meine Jquery Standard zu verhindern und ging für ein ng Sie auf, wegen, wenn ich jemals zu brauchen, um mehr Vars hinzufügen die URL, es ist jetzt sehr einfach zu tun :)

Vielen Dank für die Hilfe! insbesondere: @mplungjan

+0

Was es tun soll? Die # ist ein Anker. Das Skript auf der Seite sollte darauf reagieren. Ich kann nicht sehen, wofür location.reload verwendet wird. versuchen, es zu entfernen – mplungjan

+0

@mplungjan: Umleiten und dann aktualisieren – Kiwi

+0

Bitte lesen Sie meine geänderten Kommentar – mplungjan

Antwort

4

Wenn Sie die ID in einem Attribut speichern und verwenden ersetzen, können Sie

<a href="#" id="{{video.I‌​d}}" 
onclick="location.replace(location.href.split('#')[0]+'#/videos/detail/'+this.id‌​); return false"> 

oder für Puristen tun (Hier jQuery, ich mache keine eckigen):

Verwendung

$(function() { 
    $(".vids").on("click",function(e) { 
    e.preventDefault(); 
    location.replace(location.href.split('#')[0]+'#/videos/detail/'+this.id‌​); " 
    }); 
}); 

Weitere Parameter:

<a href="#" class="vids" data-id="{{video.I‌​d}}" data-target="somewhere"> 

mit

$(function() { 
    $(".vids").on("click",function(e) { 
    e.preventDefault(); 
    location.replace(location.href.split('#')[0]+'#/videos/detail/'+ 
     $(this).data("id‌"​)+'/'+ 
     $(this).data("target"​)); 
    }); 
}); 
+0

Haben Sie schnelle Vorschläge, wie Sie mehrere Variablen hinzufügen können? – Kiwi

+1

Siehe Update - immer noch nicht mit Angular aber jQuery – mplungjan

+0

Ich habe gerade festgestellt, dass die Seite nicht mit der location.replace() aktualisiert wird. ist das normale Verhalten? (Ich benutze das $ (this) .data() dingy) – Kiwi

-2

Können Sie eine dieser in der Onclick versuchen:

  1. history.go (0);
  2. window.location.href = window.location.href;

Bitte versuchen:

window.location.href = "your_page.html" + "?" + Date.parse(new Date()); 

Diese Methode stellt sicher, dass keine Cache-Seite zu verwenden, und ich gelte diese, wenn eine Seite durch JS neu geladen werden muss

+0

Sie tun genau die gleiche Sache, so spielt hier keine Rolle – Kiwi

+0

Können Sie versuchen, die Bearbeitung gemacht. – Nisha

+0

Keine gute Idee. Es ist ein Hash vor deinem? jetzt – mplungjan

0

Um erzwingen, um die Seite zu machen, Sie können verwenden:

$route.reload(); 

vgl.Angular Documentation:

Bewirkt, dass der $ route-Dienst die aktuelle Route neu lädt, auch wenn sich $ location nicht geändert hat.

Als Ergebnis davon erstellt ngView einen neuen Bereich und stellt den Controller wieder her.

0

Sie können Verfahren in der Steuerung mit gewünschten Funktionen hinzufügen:

// view 
<a ng-click="redirectWithReload('#/videos/detail/'+video.Id)"> 

// controller 
$scope.redirectWithReload = function(url) { 
    $location.url(url); // use $location service 
} 
+0

Das könnte funktionieren, aber das ist in einer Direktive, also suche ich nach dem Anweisungscode. – Kiwi

Verwandte Themen