Question

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

我的服务代码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。我做的任何错误？

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

Answer 1

我对代码做了一些修改。

唯一的问题是您可能没有将控制器功能中的服务作为参数包含在内。

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;
}]);

我在这个http://plnkr.co/edit/ZShhiNTu7KLY1b0t8LQG?p=preview

上做了一个傻瓜

<强>更新

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

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

<强>更新

我已将您的代码http://plnkr.co/edit/J6i6QY4sO3ZzoEvbnzJ3?p=preview分叉并更改了两件事scope: $scope，对于CSS问题，我已将模板更改为plain并删除了控制器。

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

$ http调用后，angular js不绑定范围数据

1 个答案: