0

我已经使用 Metro Ui Css 开始了一个页面，做了一个登录表单，一切都很好，然后我插入了一些角度，以便我可以做一些路由，路由工作正常，但我再也看不到表单了，我可以按下按钮，但只是看不到它。

索引.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="angular.js@*" data-semver="1.4.3" src="js/angular.js"></script>
<script data-require="angular-route@1.2.17" 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>

配置.js

(function(){
  var app = angular.module("caiApp",["ngRoute"]);
  app.config(function($routeProvider){
    $routeProvider
      .when("/login",{
        templateUrl: "login.html",
        controller:"MainController"
      })
      .otherwise({redirectTo: "/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 加载正常，表单在那里，我什么都看不到。

4

1 回答 1

0

虽然你还没有把你的完整代码，比如 login.html 或 MainController.js 或 login.css ，但我仍然在试一试。我认为您默认情况下将表单不透明度保持为零，然后一旦加载了 DOM，您就可以通过将不透明度设为 1 来使其可见。

现在的问题是您的 div 'login-form' 在 login.html 中，它通过路由加载，并且您在 login.js 中更改其不透明度（为什么不在 MainController 中？）

除非加载 DOM，否则 Angular 应用程序不会启动，因此 login.js 代码在 login.html 附加到 DOM 之前执行，因此您的表单保持隐藏状态。

解决方案： 将 login.js 代码移动到 MainController 并使用 Angular 显示元素（ng-show 指令）。

于 2015-08-28T10:15:00.627 回答