Issues with AngularJS Controller

Question

I have the following setup in my html file:

<body>
    <nav ng-controller="loginCtrl">
        <div>
            <li>Apple</li>
            <li>Mango</li>
            <li>{{user}}</li>
        </div>
    </nav>

    <div ui-view></div>

</body>

I have a navigation menu and the ui-view that displays different pages.

I also have a controller, loginCtrl, with a scope variable called $scope.user. This controller is also called in the UI-state router for the login.html file as well so that the login form can use its methods.

When a user logs in, I want to show his name in the navigation menu using the {{user}} above. The navigation menu as you can see is visible (static) regardless of other partial pages that will be loaded in the ui-view.

At the moment, it is not working and I don't know why.

My understanding is that the login form in the login.html and the navigation menu are in different files so that may be they are using the same controller (under the same module) yet may be operating in different scopes/environments (am not really sure about that).

That is why I update the value of $scope.user but it doesn't appear in the navigation menu.

Why is it not working and how can I achieve my functionality?

They are two different instances of same controller. Each has its own scope. — vp_arth
– vp_arth, Commented Jun 16, 2016 at 14:09

devconcept · Accepted Answer · 2016-06-16 15:35:16Z

2

Using a singleton service to share same UserData object:

app.service('UserData', function(){return {name: 'default'};});
app.controller('LoginController', function($scope, UserData){
    $scope.user = UserData;
});

Now, all controller instances have access to same UserData object.
When user.name has changed, all controllers can see it.

edited Jun 16, 2016 at 15:35

devconcept

3,6951 gold badge29 silver badges41 bronze badges

answered Jun 16, 2016 at 14:16

vp_arth

15k4 gold badges43 silver badges72 bronze badges

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

Comments

Mickaël R. · Accepted Answer · 2016-06-23 08:00:23Z

0

I'm wondering if it's necessary to cal your LoginController for your ui-view and a sibling element, when you could load it on a parent element

Anyway, you have several solutions to make the two-way binding work:

@vp_arth solution is really great, usually used this to share data between controllers
Move your ng-controller attribute to a common parent element, and if needed, declare another controller for your login.html, that will be a child of your LoginController. Then use an object instead of a variable in your parent scope:

$scope.user = {};

and then fill it in your child scope like this: $scope.user.name = ...

Even if you're using the same controller as parent AND child scope, you should make this work with something like this: $scope.user = $scope.user ? $scope.user : {}; instead of $scope.user = {};

(if it's not clear I can make a comparative fiddle to show you)

This wiki really helped me when I had issues like yours: https://github.com/angular/angular.js/wiki/Understanding-Scopes

edited Jun 23, 2016 at 8:00

answered Jun 16, 2016 at 15:27

Mickaël R.

3442 silver badges7 bronze badges

2 Comments

vp_arth Over a year ago

One detail: his nav and inside ui-view controllers are not parent-child. :)

Mickaël R. Over a year ago

Oups what a small detail... thanks so much for pointing this, I'll edit the answer!

Collectives™ on Stack Overflow

Issues with AngularJS Controller

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related