AngularJS ng-switch заставляет шаблоны моментально отображаться

У меня есть одностраничное угловое приложение с услугой аутентификации. Целевая страница приложения - это форма, в которой пользователь может войти. Существует также ссылка на страницу регистрации, где пользователь может создать учетную запись. Они реализованы с помощью директивы ng-switch, поскольку моя служба проверки подлинности, похоже, не позволяет перенаправлять на новый URL-адрес, когда пользователь нажимает «Зарегистрироваться». Когда пользователь выполнил вход, они видят строку меню, которая должна отображаться только при аутентификации пользователя. Моя проблема заключается в том, что когда я нажимаю кнопку обновления на целевой странице, форма «Зарегистрироваться» и текстовая вспышка на фоне формы «вход» в течение секунды. Надеюсь, что это объяснение имеет смысл, кто-нибудь знает, как его исправить или есть предложение о лучшей структуре?AngularJS ng-switch заставляет шаблоны моментально отображаться

Вот мой index.html:

<html ng-app="myApp" > 
<head> 
    <title> My App</title> 
    <link rel="stylesheet" type="text/css" href="css/app.css"> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"> 
    <link rel="stylesheet" type="text/css" href="css/signin.css"> 
    <link rel="stylesheet" type="text/css" href="css/passwordvalidation.css"> 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet"/> 
</head> 
<body ng-controller="MainCtrl"> 
<div ng-switch on="view.controller"> 

    <div ng-switch-default ng-controller="UserCtrl"> 

     <div ng-show="!isAuthenticated"> 
      <form class = "form-signin"> 

//Sign In Form code here 

         <button class = "btn btn-primary" ng-click="signIn()">Sign In</button> 

//This button performs the ng-switch based on the controller name 
         <button class = "btn btn-default" ng-click= "view.controller = 'UserNewCtrl'" >Register</button> 

        </div> 
       </div> 
      </form> 
     </div> 
<!--This part of index.html is only shown when a user has been authenticated --> 


     <div ng-show="isAuthenticated"> 
//MenuBar Code here 

      </div> 

<!--This is where partials will be loaded depending on menu item selection--> 
      <div class="col-md-10"> 

       <div ng-view></div> 

      </div> 

     </div> 


    </div> 


<!--Start of sign up form--> 

    <div ng-switch-when="UserNewCtrl" > 
     <div ng-controller = "UserNewCtrl" > 
      <div ng-show="!isAuthenticated"> 

//Sign Up Form Code here 

       </div> 
      </div>  
     </div> 

    <!--End of Sign Up Form--> 



    <script src="js/vendor.js"></script> 
    <script src="js/app.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script src="js/jquery-1.10.2.js"></script> 
    <script src="js/transition.js"></script> 
    <script src="js/ui-utils.js"></script> 

</body> 
</html>

И мой MainCtrl, который должен контролировать всю страницу, и устанавливает контроллер по умолчанию тот, который обрабатывает подписание в таким образом, что знак в форма является первым, что земля, на, если это помогает:

angular.module('myApp.controllers') 
    .controller('MainCtrl', function($scope) { 
    $scope.view={ 
     controller: 'UserCtrl' 
    }; 

    })

источник

2014-02-17 bookthief

Посмотрите на атрибут 'ng-cloak' [здесь] (http://docs.angularjs.org/api/ng/directive/ngCloak) – callmekatootie

Это FOUC вопрос. Форма мигает, потому что она появляется в состоянии по умолчанию вашей страницы до того, как AngularJS завершил загрузку.

Откажитесь от ngCloak или рассмотрите возможность перемещения вашей формы в директиве элемента, которая визуализируется условно.

источник

2014-02-17 18:45:59

Любые советы по использованию ngCloak? Документация довольно скудная. – bookthief

Получил это, чтобы работать и исправил проблему отлично, спасибо! – bookthief

AngularJS ng-switch заставляет шаблоны моментально отображаться

ответ

Смежные вопросы