-1

I am using the $rootScope to get and update an avatar. Now, when the user updates a new avatar, the ng-src of the should also update, showing the new avatar that has just been uploaded.

I have realized this by watching the $rootScope.myAvatar in my controller and then setting the $scope.myAvatar to the newValue. Unfortunately, the ng-src is not updating in this case. I have read many questions concerning problems with ng-src and null values, but this is just a change in the $scope and I don't understand why updating $scope.myAvatar does not cause the change of ng-src. I have tried manually calling $scope.$apply(), it does not work as the $rootScope is still digesting.

router.js:

...
.when('/account', {
            'templateUrl': 'components/account/account.tpl.html',
            'controller': 'accountCtrl as ctrl',
            'auth': true,
            'reloadOnSearch': false
        })
...

Controller as ctrl:

function accountCtrl($scope, $rootScope, accountService) {
var vm = this;

accountService.getAvatar().then(function(res) {
    vm.myAvatar = res;
});

$rootScope.$watch('myAvatar', function (newValue, oldValue) {
    if (newValue) {
       vm.myAvatar = $rootScope.myAvatar;
    }
});

}

And the html:

<img ng-src="{{ctrl.myAvatar}}" alt="avatar" width="100" height="100"/>
Irshu
  • 8,248
  • 8
  • 53
  • 65
DEls
  • 241
  • 3
  • 14
  • 2
    `ctrl.myAvatar` isn't `$rootScope.myAvatar`, nor is it `$scope.myAvatar`. – JLRishe May 10 '16 at 08:18
  • sorry, look at the edited code. It's a variable vm which I use for the scope. – DEls May 10 '16 at 08:25
  • your value is property of object - use the object.property. – Ceylan Mumun Kocabaş May 10 '16 at 08:27
  • Is this a directive controller? Can you please post also the surrounding code? its hard to figure out with this few informations – micha149 May 10 '16 at 08:27
  • added the surrounding ctrl and the service call on loading the ctrl. The ng-src should update when the avatar in the $rootScope is changed. – DEls May 10 '16 at 08:32
  • @CeylanMumunKocabaş can you be a little more specific? – DEls May 10 '16 at 08:34
  • Can you please add the controller directive call in your template?! I think you missed the as-part like `ng-controller="AccountCtrl as ctrl"` – micha149 May 10 '16 at 08:39
  • @micha149 I added the router.js. – DEls May 10 '16 at 08:42
  • I don't understand your use of the `$watch`, you can't watch `myAvatar` like that if it is attached to the functions `this`. – Callum Linington May 10 '16 at 08:48
  • `ng-src` is watching the value change on the property. So when you do upload a new one it should reflect in the controller! What you should use is an event aggregator or the built in event system. – Callum Linington May 10 '16 at 08:49
  • Problem is that I use another controller (DialogCtrl) where the new avatar is uploaded. There I call something like $rootScope.updateAvatar() after finishing the upload. So I need a parent scope (i.e. rootScope) which both, the accountCtrl and the DialogCtrl have access to. – DEls May 10 '16 at 08:50
  • You're right, it does reflect it in the controller. I am logging it right after I set vm.myAvatar. Still, the image does not update. – DEls May 10 '16 at 08:52
  • Here is an example of inter controller communication: https://plnkr.co/edit/zr17Eyh0C2cjczSEIBfu?p=preview – Callum Linington May 10 '16 at 08:57
  • And another example here: https://plnkr.co/edit/SZl8S2WNpj2kDWiZvmfs?p=preview – Callum Linington May 10 '16 at 08:59

1 Answers1

-1

I think your router configuration is wrong. Try the following one:

...
.when('/account', {
    'templateUrl': 'components/account/account.tpl.html',
    'controller': 'accountCtrl',
    'controllerAs': 'ctrl'
    'auth': true,
    'reloadOnSearch': false
})
...
micha149
  • 831
  • 1
  • 9
  • 15
  • yes it's correct. Works perfectly for everything else. This controller and the router config work for tens of lines of code. – DEls May 10 '16 at 08:47