How to refresh the previous page using AngularJS?

Question

We have ASP.NET application where we use AngularJS. There's a page with the table (list) that contains pictures and their properties. The pictures are in first column of the table. The code looks as following:

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

We can edit some picture by clicking "Edit" button and go to the next page (edit). After we made the changes, we click "Back" button to return to the previous page (list).

The issue is the image on first page hasn't been refreshed if we changed it on edit page, that is pic.FullUrl doesn't take effect.

I've tried to use the watch function, but no luck.

How to make it work?

UPDATE

We have a service:

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

And we use it when accept changes on edit page in this way:

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

As you can see we call ToList and go to list page, but without reloading.

In list's controller we have this:

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

On list page we have this:

<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>

And PicTable.htm looks as following:

<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>

Are you running into a cache issue? If so try adding a timestamp parameter to the end of the image url. — mccainz, Apr 29 '15 at 13:20
When I refresh the page by pressing F5, the new image is displayed. — tesicg, Apr 29 '15 at 13:21

mccainz · Accepted Answer · 2015-04-29T14:20:37.677

Sounds like you have an image cache issue. Place a timestamp parameter on the end of your image url "*.jpg?ts=3324324". This will let the browser know it needs to refetch the image once it has been edited. Initialize the timestamp when the page loads and update the timestamp whenever an image is edited.

You can try the plnkr below which you can observe in your network panel, will fetch the image each time the timestamp is updated.

Edit: updated to demonstrate communication across controllers.

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

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" 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>

Add the logic in your controller and expose it to your view via scope etc. Make it a property on your scope, say 'lastEdit' and use it thus. — mccainz, Apr 29 '15 at 13:32
What if the pages are controlled by different controllers, that is the list is in List controller and edit is in Edit controller? — tesicg, Apr 29 '15 at 13:56
Then you will need to communicate between controllers in order to know when to update the timestamp. http://stackoverflow.com/questions/11252780/whats-the-correct-way-to-communicate-between-controllers-in-angularjs — mccainz, Apr 29 '15 at 14:01
Updated the example to code to demonstrate one method to communicate across controllers. — mccainz, Apr 29 '15 at 14:15
Thank you for your efforts, but I'm not able to incorporate your approach in our code. Please, take a look at the UPDATE section in the original post. — tesicg, Apr 30 '15 at 08:03

score 0 · Answer 2 · answered Apr 29 '15 at 13:30

0

You can add time stamp to uniquely identify image url on change.

on edit add the time stamp like this...

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

this will tell the browser that your image had been changed and it will do refresh.

answered Apr 29 '15 at 13:30

BrainCoder

5,197
5
30
33

How to refresh the previous page using AngularJS?

2 Answers2