angular js not bind scope data after $http call

Question

i using the login via popup window in angular application. After popup i need to fill username and password , then i hit the sign in button , i ill get the json response , based on the response i have to show user account options menu using ng-show . for this case i m using following service and controller

my service code snippt

factory('services', ['$http', function ($http, logger) {
    var ser = {};
      ser.userLogin = function (data) {
        return $http({
            method: "post",
            url: "login",
            data: data,
            async: true,
            cache: false,
        }).success(function (result) {
                return result.data;
            }
        );

    };


    return ser;
}])

my controller code snippet

$scope.submitLogin = function () {

                return services.userLogin($scope.login).then(function (data) {
                    var result = data.data;
                    if (result) {
                        console.log(result);
                        $scope.usercontrol = true;

                        console.log($scope.usercontrol);
                        ngDialog.close();
                    }


                })
 }

Template code

 <ul ng-hide="usercontrol" class="nav navbar-nav navbar-right">
                            <li><a ng-click="signIn()"> <strong>Sign In</strong></a></li>
                            <li><a ng-click="signUp()"><strong>Sign Up</strong></a></li>
                        </ul>

                        <ul ng-show="usercontrol" class="nav navbar-nav navbar-right">
                            <li ng-class="{ active: isActive('/account')}"><a  href="#/account"> <strong>My Account</strong></a></li>
                            <li><a href="{{route('logout')}}"><strong>Sign Out</strong></a></li>
                        </ul>

based on above code in my application working finely but not set $scope.usercontrol . any mistake i did?

demo plnkr.co/edit/EbfPjKWh6f4nwNcoqly1?p=preview

Do you have this in a plnkr.co hosted?..we can't really work on this unless you replicate your scenario. — cs1193
– cs1193, Commented Nov 22, 2014 at 7:11
Plnkr not working there is a problem with the modal box you are using, it goes below the overlay. Please see ng-dialog documentation and make the correction. — cs1193
– cs1193, Commented Nov 22, 2014 at 8:24
plnkr.co/edit/EbfPjKWh6f4nwNcoqly1 is updated with close option. after close the account links have to shown — Suresh Velusamy
– Suresh Velusamy, Commented Nov 22, 2014 at 8:45
You're having a ng-dialog CSS issue, your code is working. SOLVE THAT. — cs1193
– cs1193, Commented Nov 22, 2014 at 8:55

cs1193 · Accepted Answer · 2014-11-22 10:01:49Z

I have done some modification over the code.

Only thing is you might have not included the service in you controller function as a parameter.

html

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@*" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>SO Question</h1>
    <div ng-controller="LoginCtrl">
      <ul ng-hide="usercontrol" class="nav navbar-nav navbar-right">
        <li><a ng-click="signIn()"> <strong>Sign In</strong></a></li>
        <li><a ng-click="signUp()"><strong>Sign Up</strong></a></li>
      </ul>

      <div ng-hide="usercontrol">
        <input type="text" ng-modal="login.username" placeholder="username">
        <input type="password" ng-modal = "login.password" placeholder="password">
        <button ng-click="submitLogin()">Sign IN</button>

      </div>

      <ul ng-show="usercontrol" class="nav navbar-nav navbar-right">
        <li ng-class="{ active: isActive('/account')}"><a  href="#/account"> <strong>My Account</strong></a></li>
        <li><a href="{{route('logout')}}"><strong>Sign Out</strong></a></li>
      </ul>
    </div>
  </body>

</html>

script.js

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

app.controller('LoginCtrl', ['$scope', '$http', '$timeout', 'LoginService', function($scope, $http, $timeout, LoginService){
      $scope.usercontrol = false;

      $scope.submitLogin = function() {
            LoginService.userLogin($scope.login).then(function (data) {
      var result = data;
      if (result) {
          console.log(result);
          $scope.usercontrol = true;

          console.log($scope.usercontrol);
      }


    });
  };

}]);

app.factory('LoginService', ['$http', function($http){
  var ser = {};

  ser.userLogin = function (data) {
    return $http({
      method: "GET",
      url: "login.json",
      data: data,
      async: true,
      cache: false,
    }).success(function (result) {
          return result.data;
        }
    );

  };

  return ser;
}]);

I have made a plunkr on this http://plnkr.co/edit/ZShhiNTu7KLY1b0t8LQG?p=preview

UPDATE

You have missed to add scope: $scope to continue in the ngDialog, and please check on the CSS issues.

http://plnkr.co/edit/ZShhiNTu7KLY1b0t8LQG?p=preview

UPDATE

I have forked your code http://plnkr.co/edit/J6i6QY4sO3ZzoEvbnzJ3?p=preview and changed 2 things, scope: $scope and for CSS issues I have changed the template into plain and removed controller.

            ngDialog.open({
                template: 'signinDialog',
                scope: $scope,
                className: 'ngdialog-theme-plain'
            });

plnkr.co/edit/EbfPjKWh6f4nwNcoqly1 please refer my code and check i cannot show the account options after close the dialog
I have forked your code plnkr.co/edit/J6i6QY4sO3ZzoEvbnzJ3?p=preview and changed 2 things, scope: $scope and for CSS issues I have changed the template into plain

Collectives™ on Stack Overflow

angular js not bind scope data after $http call

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related