6

我正在服务器上旋转图像，我想知道如何在我的页面上显示图像更改？

我想我必须使用 $scope.$apply() 但每次我使用它时都会收到错误消息“正在消化循环”

模板.html

 < img src='{{tempimagefilepath}}/> <!--image-->

控制器.js

 photoalbumServ.rotate_photo(post).then(function(data) {
  //after server modifies photo
    $scope.tempimagefilepath = $scope.baseurl + "user_images/user_43/temp/123-temp.jpg";
     $scope.$apply();
    });

谢谢

解决方案：

我的解决方案是更改范围值 {{tempimagefilepath}}，因此图像会更改。这要求我在旋转图像时不断重命名服务器上的文件。

4

6 回答 6

7

两件事情。首先，您应该使用ng-src而不是src阻止您的客户端在 Angular 评估表达式之前尝试加载图像。

其次，您传递$apply()一个函数回调来进行必要的范围更改：

photoalbumServ.rotate_photo(post).then(function(data) {
    //after server modifies photo
    $scope.$apply(function() {
        $scope.tempimagefilepath = $scope.baseurl + "user_images/user_43/temp/123-temp.jpg"; 
    });
});
于 2013-10-11T04:27:30.810 回答
4

我认为这是因为您的浏览器缓存。不需要 $apply()

尝试这个

var random = (new Date()).toString();
$scope.tempimagefilepath = newUrl + "?cb=" + random;
于 2015-04-05T05:58:54.083 回答
2

您可以尝试使用ng-src而不是 src

<img ng-src="{{tempimagefilepath}}" />

我认为你不需要做 $scope.$apply(); 然后

于 2013-10-11T04:26:32.480 回答
0

我有同样的问题，我有一个<user-picture>指令，在用户设置页面上，用户可以更改他的图片。图片来自 api 之类的url + token。当我从数据库中更改图片时，我获得了成功，然后我需要ng-src="{{mainCtrl.picture.src}}"在指令的每个实例上更新文件。

这是指令： 

angular.module('appApp')
.directive('userPicture', function() {
    return {
        restrict: 'E',
        template: '<img class="img-responsive" ng-src="{{mainCtrl.picture.src}}" />',
        controller: 'UserPictureCtrl',
        scope: true,
        replace: true
    }
})
.controller('UserPictureCtrl',['$scope', '$resource', 'HelpersService', '$sessionStorage',
function ($scope, $resource, HelpersService, $sessionStorage) {

    $scope.mainCtrl.picture = {};
    $scope.mainCtrl.picture.src = HelpersService.domain + 'user/getPictureAsStream?token=' + $sessionStorage.token;

}]);
我正在ng-src="url file address string"从 mainCtrl 绑定。当我更改数据库上的图片时，我将 $scope.mainCtrl.picture.src 的值重新分配给相同的 url + 令牌，但我都添加了一个额外的&randurl 参数，所以 url 看起来像这样： http://<domain>/<serverApi>/user/getPictureAsStream?token=65145d12-f033-41f1-b101-9ed846352284&rand=0.6513215699，支付注意最后一个参数，&rand=0.6513215699。这告诉浏览器它是来自不同 url 的不同文件，并为它向服务器发出 get 请求，而不是在服务器上，额外的参数被忽略，因此即使它位于同一个位置。就像它更新指令图像一样。

于 2015-08-16T15:38:34.580 回答
0 
Template HTML 
 < img ng-src='{{tempimagefilepath}}/>

AngularJS Code
photoalbumServ.rotate_photo(post).then(function(data) {
    //after server modifies photo
    $scope.$apply(function() {
        $scope.tempimagefilepath = $scope.baseurl + "user_images/user_43/temp/123-temp.jpg"; 
    });
});
于 2018-08-31T12:30:04.927 回答
0

正如其他人所说，使用 ng-src 。但重要的是参考您的控制器

   <div ng-controller = "controller">
     <img ng-src="{{tempimagefilepath}}" />
   </div>
于 2019-04-22T17:18:46.843 回答