2015-08-28 3 views
0

Ive запустил страницу, используя метро Ui Css, сделал регистрационную форму, и все было в порядке, после чего я вставил некоторые угловые, чтобы я мог выполнить некоторую маршрутизацию, работа маршрутизации прекрасна, но я не могу видеть форму больше , там я могу нажимать кнопки, но просто не могу это видеть.угловая маршрутизация теряет цвет

index.html

<!DOCTYPE html> 
<html lang="pt"> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 

<!-- metro--> 
<link href="css/metro.css" rel="stylesheet" type="text/css"> 
<link href="css/metro-icons.css" rel="stylesheet" type="text/css"> 
<link href="css/metro-responsive.css" rel="stylesheet" type="text/css"> 
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script> 
<script type="text/javascript" src="js/metro.min.js"></script> 

<!--Angular---> 
<script data-require="[email protected]*" data-semver="1.4.3" src="js/angular.js"></script> 
<script data-require="[email protected]" data-semver="1.4.3" src="js/angular-route.js"></script> 

<!--APP--> 
<script type="text/javascript" src="js/config.js"></script> 
<script type="text/javascript" src="js/MainController.js"></script> 
<script type="text/javascript" src="js/login.js"></script> 
<link href="css/login.css" rel="stylesheet" type="text/css"> 



</head> 
<body class="bg-darkTeal" ng-app="caiApp"> 
    <div ng-view></div> 
</body> 
</html> 

config.js

(function(){ 
    var app = angular.module("caiApp",["ngRoute"]); 
    app.config(function($routeProvider){ 
    $routeProvider 
     .when("/login",{ 
     templateUrl: "login.html", 
     controller:"MainController" 
     }) 
     .otherwise({redirectTo: "/login"}); 
}); 



}()); 

login.js

$(function(){ 
      var form = $(".login-form"); 
      form.css({ 
       opacity: 1, 
       "-webkit-transform": "scale(1)", 
       "transform": "scale(1)", 
       "-webkit-transition": ".5s", 
       "transition": ".5s" 
      }); 
     }); 

я должен делать что-то неправильно, потому что login.html нагрузки хорошо, форма есть, я просто не вижу ничего.

+0

Ур Логин Состояние имеет MainController, определяемый как Ctrl, вы должны делать логику longin.js там, и я бы рекомендовал использовать ui-router вместо routeProvider – stackg91

ответ

0

Хотя вы не указали свой полный код, как login.html или MainController.js или login.css, но я все еще делаю снимок. Я думаю, что вы сохранили свою непрозрачность формы как ноль по умолчанию, а затем, когда DOM загружен, вы делаете ее видимой, делая непрозрачность как 1.

Теперь проблема заключается в том, что div 'login-form' находится внутри входа. html, который загружается через маршрутизацию, и вы меняете его непрозрачность в login.js (почему бы и нет в MainController?)

Угловое приложение не запускается, если DOM не загружен, так что код login.js выполняется до того, как login.html будет добавлен к DOM, поэтому ваша форма остается скрытой.

Решение: Move login.js код MainController анс использование угловой для отображения элемента (нг-шоу директивы).

+0

thats it! это сработало, спасибо большое! –

+0

Как вы говорите, это сработало, пожалуйста, отметьте мое сообщение как решение и не стесняйтесь его голосовать. – Sanjeev

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