AngularJs: вход в систему происходит только после двойного щелчка

Я новичок в AngularJs.

Я разрабатываю небольшое угловое приложение.

Мой подход: моя страница index.html состоит из двух частей: ng-view и div с 4 кнопками навигации. Div изначально скрыт с помощью ng-show.ng -show = "variable" (в главном контроллере создается переменная с нулевым значением. Эта переменная изменится с Null на true при успешном входе в систему.). При успешном входе в систему div навигации станет видимым, а остальная часть все выглядит хорошо, по крайней мере, на данный момент.

Проблема: кнопка входа в систему запускает функцию входа в систему. Вход в систему происходит только при двойном нажатии кнопки. В консоли, как я вижу, созданы два последовательных идентификатора сеанса. При 1-м щелчке переменная меняется с нуля на истину. все еще есть влияние на всю страницу.

Может ли кто-нибудь помочь.


person Jithin Shaji    schedule 03.02.2014    source источник
comment
Можете ли вы поделиться кодом / скрипкой / плунжером?   -  person Vadim    schedule 03.02.2014


Ответы (1)


Я не видел вашего кода, но думаю, что ваша проблема в том, что вы пытаетесь изменить область просмотра, и это не та же область, что и у вашей навигации div. В этом случае вы можете либо изменить свой div навигации, чтобы он имел ту же область видимости, что и представление, либо использовать $rootScope.

HTML

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

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

  <body>
    <h1>Log-on App</h1>
    <div>
      <ul ng-show="variable">
        <li><a href="#/one">One</a></li>
        <li><a href="#/two">Two</a></li>
        <li><a href="#/three">Tree</a></li>
        <li><a href="#/fore">Fore</a></li>
      </ul>
    </div>
    <div ng-view></div>
  </body>

</html>

JavaScript

angular.module('app', ['ngRoute']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/', {
        controller: 'appController',
        template: '<div ng-show="!variable"><input type="text" /><input type="button" value="Log On" ng-click="login()" /></div>'
      }).
      otherwise({
        redirectTo: '/'
      });
  }]).
  controller('appController', ['$rootScope', '$scope', function($rootScope, $scope) {
    $rootScope.variable = null;
    $scope.login = function() {
      $rootScope.variable = true;
    }
  }]);

Plunker: http://plnkr.co/edit/Cjn2K8IEg0WQZDGVwPIw?p=preview

Другая причина, о которой я могу думать, это то, что вы пытаетесь изменить $scope вне контроллера. В этом случае вы должны вызвать $scope.$digest() или $scope.$apply() после изменения переменных области.

JavaScript

function logOnClick() {
  var $scope,
      div;
  div = document.getElementById('navigationDivId');
  $scope = angular.element(div).scope();
  $scope.variable = true;
  $scope.$digest();
}

РЕДАКТИРОВАТЬ: вход в систему с помощью удаленной службы

angular.module('app', ['ngRoute']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/', {
        controller: 'appController',
        template: '<form ng-show="!variable"><input type="text" name="user" ng-model="user" placeholder="user name"/><br/><input type="password" name="password" ng-model="password" placeholder="password" /><br/><input type="button" value="Log On" ng-click="login()" /></form>'
      }).
      otherwise({
        redirectTo: '/'
      });
  }]).
  factory('appLoginService', ['$http', function($http) {
    var isLogedOn = false,
        user;

    return {
      login: function(name, password) {
        return $http({
          method: 'GET',
          url: 'login',
          params: {
            name: name,
            password: password
          }
        }).
          success(function(data) {
            if(data.status === 'OK' && data.authenticated === true) {
              isLogedOn = true;
              user = data.user;
            }
          }).
          error(function(data) {
            alert('Error!');
          });
      },
      isLoggedOn: function() {
        return isLogedOn;
      },
      getUser: function() {
        return user;
      }
    }
  }]).
  controller('appController', ['$rootScope', '$scope', 'appLoginService', function($rootScope, $scope, appLoginService) {
    $rootScope.variable = null;
    $scope.login = function() {
      appLoginService.
        login($scope.user, $scope.password).
        success(function() { // <- don't check isLoggedOn directly, wait until response come from server
          $rootScope.variable = appLoginService.isLoggedOn();
        });
    }
  }]);
person Vadim    schedule 03.02.2014
comment
Спасибо, Вадим, за ценный ответ. - person Jithin Shaji; 03.02.2014
comment
Позвольте мне добавить эти. Сервер, используемый для проекта - vertX. В части входа в систему я должен вызвать функцию с параметром userName и паролем. Мне вернут JSON в качестве ответа на мой забавный звонок. Если пользователь аутентифицирован, ключ в json-объекте status будет иметь значение ok, в противном случае - denied. Здесь я сделаю переменную = true, если status = ok. Это то, что я пытался. У меня возникает эта проблема, только когда я использую функцию vertX. Предположим, я пишу, как будто для переменной установлено значение true, когда $ scope.userName = 'J'. Тогда вход в систему происходит в один клик. - person Jithin Shaji; 03.02.2014
comment
вот часть входа в систему с использованием удаленной службы, которая возвращает JSON: plnkr.co/edit/HJQYLLL3XLQam9B0rZT = предварительный просмотр - person Vadim; 03.02.2014