Question

我开始使用地铁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="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>

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加载很好，表单就在那里，我什么也看不见。

Answer 1

虽然你还没有输入像login.html或MainController.js或login.css这样的完整代码，但我还是在拍摄它。我认为默认情况下你的表单不透明度保持为零，然后一旦加载了DOM，你就可以通过将不透明度设为1来使其可见。

现在的问题是div'login-form'在login.html里面，它通过路由加载，你在login.js中改变它的不透明度（为什么不在MainController中？）

除非加载DOM，否则Angular app不会启动，因此在将login.html附加到DOM之前执行login.js代码，因此您的表单仍然隐藏。

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

角度路由失去颜色

1 个答案: