CODEWITHSUNDEEP
javascriptangularjsangularjs-scope
igor
igor

Reputation: 37

Can't access scope from controller function

I have problem with scope. I can't access scope attribute fullName from controller method login. Why?

App.controller('LoginController', ['$scope', 'LoginService', '$location', function(scope, LoginService, location) {
    scope.fullName = "Full name";

    scope.login = function(data, scope) {

        LoginService.login(data).then(function(data) {

            scope.fullName = LoginService.getFirstName() + " " + LoginService.getLastName();
        });
    };

    scope.logout = function(data) {
        LoginService.logout();
        location.path("/index.html#/login");

    };

}]);

Upvotes: 0

Views: 361

Answers (3)

Shehryar Abbasi
Shehryar Abbasi

Reputation: 378

see this for a working example of (a general way) how to send data to and return data from a service - jsfiddle: https://jsfiddle.net/z5vd676x/ and copy of the code below. you can adapt it to make it more efficient for your application and follow best practices (i.e. promises, error handling, minification, etc):

var app = angular.module('myApp', []);

app.controller('LoginController', function($scope, LoginService) {
    $scope.fullName = "Full name";

    $scope.login = function(data) {
        $scope.data =data;  //store as $scope.data and pass it to the service :
        $scope.fullName = LoginService.getFirstName($scope.data) + " " + LoginService.getLastName($scope.data);  

    };

});

//this is an example of a .service, you did not provide your code for this
app.service('LoginService', function() {   
    this.getFirstName = function (data) {
        if (data === '123') 
            return 'John';
        else 
            return 'Mike';
    };

    this.getLastName = function (data) {
        if (data === '123')
            return 'Winkle';
        else
            return 'Santos';
            };
});

index.html (example use) 

    <div ng-app="myApp" ng-controller="LoginController">
        <input type="text" ng-model="findName">  <!--bind the search text-->
        <button type="button" ng-click="login(findName)">Search</button>

<!--show the initial value below and update it when the LoginService returns your data -->
                <h3>Name: {{fullName}}</h3>  

    </div>

Upvotes: 0

igor
igor

Reputation: 37

I edited it, and now it works. :) I have another problem, fullName doesn't render in this html.

It always print fullName that i set in second line, not in login function.

<li class="dropdown" ng-controller="LoginController">
                        <a href="" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i>{{fullName}}<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="#"><i class="fa fa-fw fa-user"></i> Profile</a>
                            </li>
                            <li>
                                <a href="#"><i class="fa fa-fw fa-envelope"></i> Inbox</a>
                            </li>
                            <li>
                                <a href="#"><i class="fa fa-fw fa-gear"></i> Settings</a>
                            </li>
                            <li class="divider"></li>
                            <li >
                                <a href="" ng-click="logout()"><i class="fa fa-fw fa-power-off"></i> Log Out</a>
                            </li>
                        </ul>
                    </li>

Upvotes: 0

Krasimir
Krasimir

Reputation: 13539

Maybe it is because in login you are receiving two parameters. The second one scope overwrites the one passed into the controller.

Upvotes: 2

Related Questions