0

私はメトロ 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 が正常に読み込まれ、フォームが存在するため、何かが間違っているに違いありません。何も表示されません。

4

1 に答える 1

0

login.html や MainController.js や login.css のような完全なコードを入れていませんが、まだ試しています。デフォルトでフォームの不透明度をゼロに保っていると思いますが、DOM がロードされると、不透明度を 1 にすることで表示できるようになります。

ここでの問題は、div 'login-form' が login.html 内にあり、ルーティングを介してロードされ、login.js で不透明度を変更していることです (MainController ではないのはなぜですか?)

DOM が読み込まれない限り、Angular アプリは起動しないため、login.html が DOM に追加される前に login.js コードが実行されるため、フォームは非表示のままです。

解決策: login.js コードを MainController に移動し、Angular を使用して要素を表示します (ng-show ディレクティブ)。

于 2015-08-28T10:15:00.627 に答える