angularjs image src model değiştiğinde değiştir

Sunucuda bir görüntüyü döndürüyorum ve sayfamdaki görüntü değişikliğini nasıl gösterebileceğimi merak ediyordum?angularjs image src model değiştiğinde değiştir

Ben $ geçerlidir. Ben $ kapsamı kullanmak zorunda düşünüyorum() ama her şey ı ı hata mesajı "in progress döngüsünü sindirmek"

template.html

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

controller.js olsun kullanmak

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

sayesinde

Çözüm:

Çözümüm, {{tempimagefilepath}} kapsam değerini değiştirerek resmin değişmesini sağladı. Bu, görüntüyü döndürdüğümde sunucuda sürekli olarak dosyayı yeniden adlandırmamı gerektirdi.

kaynak

2013-10-11 user1424508

Kodunuzu rotate_phone için paylaşabilir misiniz? '$ Resource' veya' $ http' kullanıyorsanız, '$ apply''ı çağırmanız gerekmemelidir. – marcoseu

Sen haklıyım Ben $ http kullanarak kullanmak için $ http kullanmıyordu benim görüntüyü döndürmek için sunucuya fcalls yapmak için – user1424508

çalışabilir düşünüyorum bir çözüm olduğunu düşünüyorum '$ scope.temimagefilepath =' '(boş dize) '' '' geri çağırma. ve bir sonraki satırda, gerçek görüntü URL değeri yolunu yeniden atar. Hiç ') (o hala' $ uygulamak gerekmez gibi geliyor bana özet döngüsü hata mesajı –

Sen seni $ kapsamını yapmanız gereken sanmıyorum denemek ve bunun yerine src

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

ait ng-src kullanabilirsiniz $ uygulamak().; Daha sonra

kaynak

2013-10-11 04:26:32

bu konuda 'ng-src' kullanırken Ayrıca, bu yapılmalıdır o zaman 'o zaman' geri arama zaten bir kapsam sindiriminde olduğu için. $ $ $, gerçekten de Angular'e herhangi bir değişiklik (“digest” döngüsü) için izlemesi gerektiğini söyler. Çoğu yerleşik açısal yapılar bunu otomatik olarak yapar. Sadece jQuery gibi diğer kütüphaneleri kullanırken $ apply() 'ı çağırmanız gerekir ve onların geri dönüşleri açısal arama zincirinin dışındadır. – user1424508

İki şey. İlk olarak, açısal ifadeyi ifade etmeden önce istemciyi yüklemeye çalışan istemcilerinizi engellemek içinyerine ng-src kullanmalısınız.

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

kaynak

2013-10-11 04:27:30

çalışmıyor eleman – user1424508

gösterir çağrıyı –

Evet Sanırım durum buydu. Ne zaman o zaman gerçek görüntü ng-src'nin değişikliklere işaret ettiğimi değiştirmek için resmimi nasıl alabilirim? Gördüğüm gibi, görüntü yalnızca ng-src = "{{url}}" içindeki URL değiştiğinde değişir. – user1424508

Bu tarayıcı önbelleği nedeniyle olduğunu düşünüyorum:

İkinci olarak, gerekli kapsam değişiklikleri yapar bir işlev geri arama $apply() geçmektedir.

Ben aynı problem vardı bu

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

kaynak

2015-04-05 05:58:54

Evet, bu benim için çalıştı. $ Başvuru kullanmanız gerekmedi. Denetleyicide $ scope.imagePath değerinin değiştirilmesi yalnızca ng-src = "{{imagePath}}" şeklinde güncellendi ve görüntü yenilenir. Açısal sürüm 1.3.15 –

deneyin) (uygulamak $ gerekmez, ben <user-picture> direktifini vardı ve kullanıcı ayarları sayfasında kullanıcı kendi resmini değiştirebilir. Resim, url + token gibi bir api'den geliyor. Resmi veritabanından değiştirdiğimde başarı elde ederim ve daha sonra yönergenin her bir örneğinde ng-src="{{mainCtrl.picture.src}}" dosyasını güncellemem gerekiyor.

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; 
 

 
}]);

Ben mainCtrl dan ng-src="url file address string" bağlayıcı ediyorum:

direktif olduğunu. Veritabanındaki resmi değiştirdiğimde, $ scope.mainCtrl.picture.src değerini aynı url + belirtecine yeniden atarım, ancak ek bir &rand url parametresi eklediğinizde ekim eklenir: http://<domain>/<serverApi>/user/getPictureAsStream?token=65145d12-f033-41f1-b101-9ed846352284&rand=0.6513215699, son parametreye dikkat edin, &rand=0.6513215699. Bu, tarayıcıya farklı bir url'den farklı bir dosya olduğunu ve sunucuya bunun için istekte bulunacağını, sunucuda bunun yerine ekstra parametrenin göz ardı edildiğini söyler. aynı yer. Ve bunun gibi direktif imajını günceller.

kaynak

2015-08-16 15:38:34

angularjs image src model değiştiğinde değiştir

cevap

İlgili konular