कोणीय छवियां बदलती हैं जब मॉडल बदलता है

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

आप कोशिश कर सकते हैं और src

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

के बजाय ng-src का उपयोग मुझे नहीं लगता कि आप $ गुंजाइश क्या करना चाहिए $ लागू()।; फिर

Answer 2

दो चीजें। सबसे पहले, आपको src के बजाय ng-src का उपयोग करना चाहिए ताकि आपके क्लाइंट अभिव्यक्ति का मूल्यांकन करने से पहले छवियों को लोड करने का प्रयास कर सकें।

दूसरे, आप $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"; 
    }); 
}); 

Answer 3

मुझे लगता है कि इस वजह से अपने ब्राउज़र का कैश है।) लागू $ की जरूरत नहीं है (

इस

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

Answer 4

मैं एक ही समस्या थी की कोशिश, मैं एक <user-picture> निर्देश था और उपयोगकर्ता सेटिंग पेज पर उपयोगकर्ता अपने तस्वीर बदल सकते हैं। तस्वीर एपीआई से 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; 
 

 
}]);

मैं mainCtrl से ng-src="url file address string" बाध्यकारी हूँ:

यह निर्देश है। जब मैं डेटाबेस पर तस्वीर बदल रहा हूं, तो मैं उसी यूआरएल + टोकन में $ scope.mainCtrl.picture.src के मान को फिर से सौंप रहा हूं, लेकिन मैं सभी अतिरिक्त &rand यूआरएल पैरामीटर में बोता हूं यूआरएल इस तरह दिखता है: http://<domain>/<serverApi>/user/getPictureAsStream?token=65145d12-f033-41f1-b101-9ed846352284&rand=0.6513215699, अंतिम पैरामीटर, &rand=0.6513215699 पर ध्यान दें। यह ब्राउज़र को बता रहा है कि यह एक अलग यूआरएल से एक अलग फ़ाइल है और इसके लिए सर्वर पर अनुरोध प्राप्त करता है, इसके बजाय सर्वर पर, अतिरिक्त पैरामीटर को बोया जाता है, यह मुझे नई तस्वीर देता है भले ही यह स्थित हो वही स्थान और इस तरह यह निर्देश छवि अद्यतन करता है।