Accessing data of a controller in another controller

Question

I am working on a application which uses angularjs. In this i have a login page and home page.
Whole page is divided into two parts header and container each with headerCtrl and loginCtrl respectively. header is same for both parts and only rest part changes after login.

This is loginCtrl.

    angular.module('app').controller('LoginCtrl', ['$scope', 'LoginService',
    function($scope, LoginService) {
        $scope.title = "Login";

        $scope.login = function() {
            var user = {
                username: $scope.username,
                password: $scope.password
            };
            LoginService(user);
        };

    }
]);

This is loginService.

angular.module('app')
.factory('LoginService', function($http, $location, $rootScope) {
    return function(user) {
        $http.post('/login',{
                username: user.username,
                password: user.password
            }).then(function(response) {
            if (response.data.success) {
                console.log(response.data);
                $rootScope.user = response.data.user;
                $location.url('/');
            } else {
                console.log(response.data.errorMessage);
                $location.url('/');
            }
        });
    };
});

This is header.html

<div ng-controller="headerCtrl" class="container-fulid">
    <div class="row custom-row1">
        <div><span class="title_top pull-right">{{ user }}</span></div>
    </div>
</div>

How can we write headerCtrl and what changes are required in login controller and service so that i can access the user details(username) in header.html file.

if header controller present inside login controller, u can directly access — Jayamurugan, Jan 14 '15 at 10:37
how can you provide more details. is it possible to define a controller inside another controller. — ashishkumar148, Jan 14 '15 at 10:45
It might help you!! http://stackoverflow.com/questions/9293423/can-one-controller-call-another http://plnkr.co/edit/poeq460VmQER8Gl9w8Oz?p=preview — Anil Singh, Jan 14 '15 at 10:54

Anil Singh · Answer 1 · 2015-01-14T10:44:14.887

It might help you!!

Your HTML code-sample

<div ng-controller="loginCtrl" class="container-fulid">
    <div class="row custom-row1">
        <div><span class="title_top pull-right">{{ title }}</span></div>
    </div>
</div>

Your AngularJs code-sample

var baseURL = "http://localhost:56110/";
var app = angular.module('loginApp', []);

app.service('loginService', function ($http) {
    this.login = function (user) {
        return $http.post('/login', user)
          .success(function (data, status, headers, config) {              
           })
           .error(function (data, status, headers, config) {               
           });
          }
        });
    };
});

app.controller('loginCtrl', function ($scope, loginService) {

    $scope.title = "Login";
    $scope.uid = 123;
    $scope.pwd = 123;

    $scope.login = function () {
        var pwd = {
            username: $scope.uid,
            password: $scope.pwd
        };

        loginService.login(pwd).then(function (response) {               
            if (response.data.success) {
                console.log(response.data);
                $rootScope.user = response.data.user;
                $location.url('/');
            }
            else {
                console.log(response.data.errorMessage);
                $location.url('/');
            }
        });
    };
});

seems like Login comes in in title of html. but i want that uid comes at that place. — ashishkumar148, Jan 14 '15 at 10:59

score 0 · Answer 2 · answered Jan 15 '15 at 04:59

0

U can use a broadcast on the $rootscope from login controller when ur lgon service completes and listen to the use event in headercontroller.the event argument you can pass as the user details.

answered Jan 15 '15 at 04:59

Rahul Ravindran

318
3
11

Accessing data of a controller in another controller

2 Answers2