Question

我们使用AngularJS的ASP.NET应用程序。这是一个包含图片及其属性的表（列表）的页面。图片位于表格的第一列。代码如下所示：

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

我们可以点击＆＃34;编辑＆＃34;编辑一些图片。按钮，然后转到下一页（编辑）。完成更改后，我们点击＆＃34;返回＆＃34;按钮返回上一页（列表）。

问题是，如果我们在编辑页面上更改了第一页上的图片，那就是已经刷新了，即pic.FullUrl没有生效。

我试图使用手表功能，但没有运气。

如何让它发挥作用？

更新

我们有服务：

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>

Answer 1

听起来你有图像缓存问题。在图像末尾添加时间戳参数url“* .jpg？ts = 3324324”。这将让浏览器知道它需要在编辑后重新获取图像。页面加载时初始化时间戳，并在编辑图像时更新时间戳。

您可以尝试在网络面板中可以观察到的plnkr，每次更新时间戳时都会获取图像。

编辑：更新以演示跨控制器的通信。

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>

Answer 2

您可以添加时间戳以在更改时唯一标识图像网址。

在编辑时添加这样的时间戳......

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

这将告诉浏览器您的图片已被更改，并且它将进行刷新。

如何使用AngularJS刷新上一页？

2 个答案: