如何使用AngularJS刷新上一頁？

我們有使用AngularJS的ASP.NET應用程序。有一個包含圖片及其屬性的表格（列表）的頁面。圖片在表格的第一欄。代碼如下所示：如何使用AngularJS刷新上一頁？

<td> 
    <a ng-href="{{pic.FullUrl}}" target="_blank"> 
     <img class="img-thumbnail" ng-src="{{pic.FullUrl}}" alt="{{pic.AltText}}" /> 
    </a> 
</td>

我們可以通過單擊「編輯」按鈕並轉到下一頁（編輯）來編輯某些圖片。我們進行了更改後，單擊「返回」按鈕返回上一頁（列表）。

問題是如果我們在編輯頁面上更改它，第一頁上的圖像沒有刷新，即pic.FullUrl不生效。

我試過使用手錶功能，但沒有運氣。

如何使它工作？

UPDATE

我們有一個服務：

PictureApp.factory('PictureService', function ($http, $location) { 
    var PictureService = function() { 
     this.ToList = function (objType, objId, mode) { 
      $location.path('/' + objType + '/' + objId + '/' + mode); 
     };

而且我們使用它時，以這種方式接受的編輯頁面上進行更改：

$scope.Accept = function() { 
    ... 
    query.then(function() { 
     PictureService.ToList($routeParams.objType, $routeParams.objId, $routeParams.mode); 
    }); 
};

正如你可以看到我們稱之爲ToList和去列表頁面，但沒有重新加載。

在列表的控制器，我們有這樣的：

$scope.$watch('rbMode', function (val) { 
    PictureService.ToList($routeParams.objType, $routeParams.objId, val); 
});

列表頁上，我們有這樣的：

<div ng-if="dataLoaded"> 
    <div ng-switch="rbMode"> 
     <div ng-switch-when="static"> 
      <div ng-include="'partials/Pic/PicTable.htm'" onload="this.pics = data;"></div> 
     </div> 
     <div ng-switch-when="banner"> 
      <accordion close-others="false"> 
       <accordion-group is-open="expandBanners" heading="{{pics[0].TypeDescription}}" ng-repeat="pics in data"> 
        <div ng-include="'partials/Pic/PicTable.htm'" onload="this.pics = $parent.pics;" ></div> 
       </accordion-group> 
      </accordion> 
     </div> 
    </div> 
</div>

而且PicTable.htm看起來如下：

<tr ng-repeat="pic in pics" ng-class="{'movable-row':isBanner}"> 
    <td>{{pic.PictureLinkID}}</td> 
    <td> 
     <a ng-href="{{pic.FullUrl}}" target="_blank"> 
      <img class="img-thumbnail" ng-src="{{pic.FullUrl}}" alt="{{pic.AltText}}" tooltip-popup-delay='1000' tooltip-placement="right" tooltip="Кликните, чтобы открыть в полном размере" /> 
     </a> 
    </td>

來源

2015-04-29 tesicg

您是否遇到緩存問題？如果是這樣，請嘗試添加一個時間戳參數到圖像url的末尾。 – mccainz

當我通過按F5刷新頁面時，顯示新圖像。 – tesicg

聽起來像是你有一個圖像緩存問題。將時間戳參數放置在圖像url的末尾「* .jpg？ts = 3324324」。這會讓瀏覽器知道在編輯後需要重新獲取圖像。初始化頁面加載時的時間戳，並在編輯圖像時更新時間戳。

您可以嘗試在網絡面板中可以觀察到的plnkr，每次更新時間戳時都會獲取圖像。

編輯：更新以演示跨控制器的通信。

http://plnkr.co/edit/lp9lwkR3hgsqtIt4c3N0?p=preview

<!DOCTYPE html> 
<html> 

    <head> 
    <script data-require="[email protected]*" data-semver="1.4.0-rc.1" src="https://code.angularjs.org/1.4.0-rc.1/angular.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    </head> 

    <body> 

    <div ng-controller="cntrl"> 
     <img ng-src="{{imgurl}}'?ts={{lastEdit}}" /> 
    </div> 

    <div ng-controller="editCntrl"> 
     <button ng-click="updateTS()">Update ts</button> 
    </div> 


     <script> 
      var app = angular.module("app",[]); 

      app.controller("cntrl",function($scope){ 
      $scope.lastEdit = (new Date()).getTime(); 
      $scope.imgurl = "http://dummyimage.com/600x400/000/fff"; 
      $scope.$on("edited",function(){ 
       $scope.lastEdit = (new Date()).getTime(); 
      }); 
      }); 

      app.controller("editCntrl",function($scope,$rootScope){ 
      $scope.updateTS = function(){ 
       $rootScope.$broadcast("edited"); 
      } 
      }); 

      angular.bootstrap(document,["app"]); 
    </script> 

    </body> 

</html>

來源

2015-04-29 13:23:29 mccainz

我應該在現有代碼中添加它？ – tesicg

在您的控制器中添加邏輯並通過示波器將其暴露給您的視圖。將其作爲示波器的屬性，並說'lastEdit'並因此使用它。 – mccainz

如果頁面由不同的控制器控制，那麼列表在列表控制器中，編輯在編輯控制器中怎麼辦？ – tesicg

您可以添加時間戳來唯一標識改變圖像的URL。

上編輯添加時間戳這樣的...

pic.FullUrl = "...path/pic.jpg"+ "?ts=" +new Date();

這將告訴你的形象已經改變了瀏覽器，它會做更新。

來源

2015-04-29 13:30:32 BrainCoder

如何使用AngularJS刷新上一頁？

回答

相關問題