angularjs image srcモデルが変更されたときに変更する

Question

私はサーバー上でイメージを回転させていますが、私のページにイメージの変更を表示する方法が不思議でしたか？私は$スコープを使用するように持っていると思う

。$（適用）しかし、毎回私はそれを使用する私は、エラーメッセージ

template.htmlを「進行中のサイクルをダイジェスト」

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

controller.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}}を変更して画像が変更されるようにしていました。そのため、イメージを回転させたときに、サーバー上のファイルの名前を変更する必要がありました。

Answer 1

あなたは私はあなたが$スコープを行う必要があるとは思わないng-srcの代わりに、SRC

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

を試してみて、使用することができます$（適用）。

Answer 2

2つのもの。まず、srcではなくng-srcを使用して、Angleが式を評価する前にクライアントが画像を読み込もうとしないようにする必要があります。

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"; 
    }); 
}); 

Answer 3

私は、これはブラウザのキャッシュためだと思う：

第二に、あなたが必要な範囲の変更を行う関数コールバックを$apply()渡します。

は、私は同じ問題を抱えていたこの

var random = (new Date()).toString(); 
$scope.tempimagefilepath = newUrl + "?cb=" + random; 

Answer 4

を試してみてください）（適用$必要はありませんが、私は<user-picture>ディレクティブを持っていたし、ユーザー設定ページで、ユーザーは自分の画像を変更することができます。 画像はurl + tokenのようなapiから来ます。私がデータベースから画像を変更すると、私は成功を収め、指示のすべてのインスタンスで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; 
 

 
}]);

私はmainCtrlから ng-src="url file address string"を結合しています。私がデータベース上の画像を変更しているときに、$ scope.mainCtrl.picture.srcの値を同じURL +トークンに再割り当てしていますが、私はすべて URLパラメータを追加してURLを追加します。 http://<domain>/<serverApi>/user/getPictureAsStream?token=65145d12-f033-41f1-b101-9ed846352284&rand=0.6513215699の場合は、最後のパラメータ、 &rand=0.6513215699に注意してください。これは、別のURLとは別のファイルであることをブラウザに伝えています。代わりに、サーバ上でサーバにリクエストを行います。余分なパラメータは無視されます。同じ場所。それと同じように、ディレクティブイメージを更新します。