angular路由掉色

Question

我已经使用 metro Ui Css 开始了一个页面，做了一个登录表单，一切都很好，然后我插入了一些 angular 这样我就可以做一些路由，路由工作正常，但我再也看不到表格了，它在那里我可以按下按钮，但就是看不到它。

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 中？ )

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

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

angular路由掉色

angular routing loses color

javascript

angularjs

metro-ui-css