Angular - $rootScope variables

Question

In my Angular 1.5 app (a SPA), I use user profile information on every "page" of the app. So, in my app.js file, I include the following code:

$http.get(API_URL + "/user")
            .then(function success(response){
                $rootScope.userInfo = response.data;
            },
            function error(response){

            });

And then in each component's controller and template, I make reference to this object like the following:

<img class="profile icon" ng-src="{{$rootScope.userInfo.profile_photo}}">

However, the image never shows up. I assume because the callback setting the $rootScope.userInfo from the response is called after the template has been loaded. How do I ensure it gets updated when the response comes in from the GET call?

EDIT - Here's more info, since the answers coming in about "don't use $rootScope in the view" isn't working for me. Making the changes suggested doesn't work. Do I need to reference $ctrl in this case?

angular.module('xxx')
        .component("navBar", {
            templateUrl: "/components/navBar/navBar.html",
            controller: NavBarController,
            bindings: {

            }
        });

function NavBarController($rootScope, $scope, $uibModal, $timeout, $http, API_URL) {
        var vm = this;

I believe you do NOT have to prefix the path with $rootScope, i.e. try ng-src="{{userInfo.profile_photo}}". — Nikos Paraskevopoulos
– Nikos Paraskevopoulos, Commented Oct 31, 2016 at 13:14
scopes are always isolate in a component. see docs.angularjs.org/guide/component#!. Therefore, components do not inherit from or have access to $rootScope. Using $rootScope is considered by many to be an anti-pattern anyway; It is recommended to use a service to store persistent data, and a requirement to use a service when in combination with components. While you might be able to use $root to get around this restriction, this is not recommended behavior. — Claies
– Claies, Commented Oct 31, 2016 at 13:34

devconcept · Accepted Answer · 2016-10-31 13:30:22Z

2

Remember that the view is bound to the $scope already, you never write the following

<img class="profile icon" ng-src="{{$scope.userInfo.profile_photo}}">

instead

<img class="profile icon" ng-src="{{userInfo.profile_photo}}">

All scopes, except isolate scopes, have inheritance and the $rootScope is at the top of that chain, so as long as no other $scope have a userInfo property in that chain writting

<img class="profile icon" ng-src="{{userInfo.profile_photo}}">

will point to the property in the $rootScope

If you are inside a isolate scope you could write

<img class="profile icon" ng-src="{{$root.userInfo.profile_photo}}">

since all scopes, even isolated, have a $root property that points to the $rootScope

Check here

angular.module('app', [])
  .controller('TestCtrl', function($scope) {
    // An empty controller to create a new scope
    // Only for demonstration of inheritance 
  })
  .directive('directive', function() {
    return {
      restrict: 'E',
      scope: {},
      template: '<div>{{$root.userInfo.name}}</div>'
    };
  })
  .run(function($rootScope) {
    $rootScope.userInfo = {
      name: 'John'
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div>{{userInfo.name}}</div>
  <div ng-controller="TestCtrl">
    {{userInfo.name}}
  </div>
  <directive></directive>
</div>

answered Oct 31, 2016 at 13:30

devconcept

3,6951 gold badge29 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Claies Over a year ago

as I mention in my comment, components are always isolate, and $root may be necessary, but not recommended for this situation.

devconcept Over a year ago

@Claies I'm aware, but as long as the OP does not change how his app is designed this is a working solution for him. You don't know for sure the cost of the change and even if he changes how that works, then it will be subject for another question. For his present problem this is the solution.

Sajeetharan · Accepted Answer · 2016-10-31 13:14:29Z

2

Just use,

<img class="profile icon" ng-src="{{userInfo.profile_photo}}">

DEMO

answered Oct 31, 2016 at 13:14

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

1 Comment

bluedevil2k Over a year ago

Please see my edits. This solution didn't work, probably because of how I set up the component

Nikhil Mohanan · Accepted Answer · 2016-10-31 13:15:43Z

0

you dont have to put $rootScope in view you should put like this

<img class="profile icon" ng-src="{{userInfo.profile_photo}}">

answered Oct 31, 2016 at 13:15

Nikhil Mohanan

1,2601 gold badge12 silver badges23 bronze badges

5 Comments

Sajeetharan Over a year ago

What is different from the answer i gave?

Dylan Wijnen Over a year ago

@Sajeetharan that he posted it 2 seconds after you and didn't see your answer

Sajeetharan Over a year ago

Not 2 secs actually 1 minute

Nikhil Mohanan Over a year ago

@Sajeetharan, site didnt updated till i post my answer.So i didnt see your answer.Good catch friend

Sajeetharan Over a year ago

@Nikhil it happens,but i thought your answer is different

Collectives™ on Stack Overflow

Angular - $rootScope variables

3 Answers 3

2 Comments

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related