ng-src not update html src after uploading a new image

[Mr. Adam]

hello every one

I have a profile and I'm showing the user photo on it after loading his data from database 

and the binding is working so good

in the same page i upload new image and the variable is changed successfully in the script file but the html still the same 

can anyone tells me what happen and why angular not update the photo src after updateing 

                    <div class="form-horizontal row" data-ng-controller="ProfileController" novalidate>

                        <h4>Personal Information</h4>

                        <hr />

                      <figure class="profile-photo is-regular is-click-area is-paragraph is-uploaded">

                                <a href="#" class="profile-photo-link">

                                    <img height="150"  ng-src="{{Photo}}" name="Photo"  width="112">

                                 

                                </a>

                            </figure>

                          

                        </div>

 <div data-ng-controller="ProfileController">

                    <h1>Personal Photo</h1>

                    <hr />

                    <p>

                        You can upload a personal photo here. Please use a portrait-style photo which is at least 112 pixels wide and 150 pixels high. The photo must be a graphic file (JPG, PNG) Max Size is 250KB.

                    </p>

                    <p>

                        <input type="text" id="tbx-file-path" value="No file chosen..." readonly="readonly" ng-bind="photo" />

                        <span class="btn btn-success fileinput-button">

                            <span>Select file...</span>

                            <input type="file" name="MyFile" id="fu-my-simple-upload" />

                        </span>

                    </p>

                    <p><a class="btn btn-primary" href="#" id="hl-start-upload"  >Start Upload</a></p>

                </div>

MainApp.controller('ProfileController', function ($scope, $http, sharedProperties) {

    $scope.userProfile = null;

    $scope.Photo = null;

    GetProfile();

    function GetProfile() {

        $http({

            method: 'Get',

            url: 'mypath service'

        }).success(function (data, status, headers, config) {

            $scope.Photo = data[0].photo;

        }).error(function (data, status, headers, config) {

            $scope.message = 'Unexpected Error';

        });

    }

    // update photo  and this working so good

    $('#fu-my-simple-upload').fileupload({

        url: 'service',

        dataType: 'json',

        add: function (e, data) {

           

        },

        done: function (event, data) {

            // this path is working and I get the new path 

            // and it's update the database also but this not update the html

            $scope.Photo = data.result.path; 

          

        },

        fail: function (event, data) {

            if (data.files[0].error) {

               

            }

        }

    });

});

regards

mohamed adam

       

[fasfsfgs]

You are using 2 separate controllers in your page. Although they use the same constructor, each one is a separate instance.

Can you use just one controller instance (just one ng-controller on your html)? That should do it for you.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

[Mr. Adam]

Even if the 2 divs inside the one controller still not changes ... I used jquery to solve this problem and it's working 

 

$("#UserPhoto").attr("src", data.result.path);

but I would like to use angular to do this instead of jquery 

[Sander Elias]

Hi Mohamed,

You are using jQuery ajax. That does operate outside angular’s change detection, so you need to notify angular that there is some stuff updated. Try this in your done callback:

 function (event, data) {
            $scope.$apply(function () {
               $scope.Photo = data.result.path; 
            });
        }

With kind regards
Sander Elias

​

[Mr. Adam]

thanks #Sander your code work with me, but I need to make the upload section and the profile section under one controller ... if they separated like the original post even if i use the same controller it's not working ... thanks man

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/DFT9vY1EPDs/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.