角度js在$ http调用后不绑定范围数据

我在角度应用程序中通过弹出窗口使用登录。弹出之后，我需要填写用户名和密码，然后我点击登录按钮，我不能得到JSON响应，基于响应，我必须使用ng-show显示用户帐户选项菜单。使用下列服务和控制器这种情况下IM

我的服务代码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; 
}])

我的控制器的代码段

$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(); 
        } 


       }) 
}

模板代码

<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>

基于在上面的代码

我应用程序正常工作但未设置$scope.usercontrol。我犯过什么错误？

演示plnkr.co/edit/EbfPjKWh6f4nwNcoqly1?p=preview

来源

2014-11-22 Suresh Velusamy

你有没有在plnkr.co托管？..我们不能真正的工作，除非你复制你的方案。 – cs1193 2014-11-22 07:11:35

plnkr.co/edit/EbfPjKWh6f4nwNcoqly1?p=preview – 2014-11-22 08:15:40

Plnkr无法正常工作，您使用的模式框出现问题，它会在叠加层下面出现问题。请参阅ng对话框文档并进行更正。 – cs1193 2014-11-22 08:24:49

我已经做了的代码做一些修改。

唯一的是你可能没有把你的控制器功能作为参数包含在服务中。

HTML

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

    <head> 
    <script data-require="[email protected]*" 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; 
}]);

我已经做了plunkr这个http://plnkr.co/edit/ZShhiNTu7KLY1b0t8LQG?p=preview

UPDATE

您错过了添加scope: $scope以继续使用ngDialog，请检查CSS问题。

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

UPDATE

我已付出你的代码http://plnkr.co/edit/J6i6QY4sO3ZzoEvbnzJ3?p=preview，改变了两件事情，scope: $scope和CSS问题，我已经改变了模板到plain和删除控制器。

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

来源

2014-11-22 07:37:14 cs1193

http：// plnkr。编辑/ EbfPjKWh6f4nwNcoqly1请参考我的代码，并检查我无法显示关闭对话框后的帐户选项 – 2014-11-22 08:46:57

我已经分叉您的代码http://plnkr.co/edit/J6i6QY4sO3ZzoEvbnzJ3?p=preview并更改了2件事情，范围： $范围'和CSS问题我已将模板更改为'普通' – cs1193 2014-11-22 09:43:14

非常感谢。你太棒了.. – 2014-11-22 10:03:56

角度js在$ http调用后不绑定范围数据

回答

相关问题