クラスは他のページでアクションを起こしていません

私はngRouteを使用しています。ルーティングはうまく動作しますが、page 1とpage 2はスタイリングされていません。私のCSSファイルでは、テスト用の背景色を変更するだけです。ここでクラスは他のページでアクションを起こしていません

<!doctype html> 
<html> 
<head> 
    <link rel = "stylesheet" href = "main.css"> 
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-route.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script> 
    <script src = "main.js"></script> 
</head> 

<body ng-app = "app"> 
    <div class = "page {{pageClass}}" ng-view></div> 
</body> 
</html>

は私のJSファイルです：

var app = angular.module("app", ["ngRoute" , "ngAnimate"]); 

app.config(function($routeProvider) { 
$routeProvider 
    .when("/" , { 
     templateUrl: "intro.html", 
     controller: "intro-controller" 
    }) 
    .when("/page1" , { 
     templateUrl: "page1.html", 
     controller: "page1-controller" 
    }) 
    .when("/page2" , { 
     templateUrl: "page2.html", 
     controller: "page2-controller" 
    }) 
}); 

app.controller("intro-controller" , function($scope) { 
    $scope.pageClass = "intro"; 
}); 
app.controller("page1-controller" , function($scope) { 
    $scope.pageClass = "page1"; 
}); 
app.controller("page2-controller" , function($scope) { 
    $scope.pageClass = "page2"; 
});

これは私のCSSファイルである

.page { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 
.intro { 
    background: blue; 
} 
.page1 { 
    background: red; 
} 
.page2 { 
    background: green; 
}

出典

2016-12-24 jalen201

あなたはこのためにplunkrを置くことができる場合には、デバッグしやすくなります。 –

classあなたは動的をを追加するには、右ではありません - あなたは次のようにng-class属性を使用する必要がありますこれは：

<div ng-class="['page', pageClass]" ng-view>

は、以下のデモを参照してください - あなたが今、あなたのコードで問題を修正することができますね。

var app = angular.module("app", ["ngRoute", "ngAnimate"]); app.config(function($routeProvider) { $routeProvider .when("/", { templateUrl: "intro.html", controller: "intro-controller" }) .when("/page1", { templateUrl: "page1.html", controller: "page1-controller" }) .when("/page2", { templateUrl: "page2.html", controller: "page2-controller" }) }); app.controller("intro-controller", function($scope, $location) { $scope.pageClass = "intro"; $scope.next = function() { $location.url("page1"); } }); app.controller("page1-controller", function($scope, $location) { $scope.pageClass = "page1"; $scope.next = function() { $location.url("page2"); } $scope.back = function() { $location.url("/"); } }); app.controller("page2-controller", function($scope, $location) { $scope.pageClass = "page2"; $scope.back = function() { $location.url("page1"); } });

.page { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .intro { background: blue; } .page1 { background: red; } .page2 { background: green; }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-route.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script> <div ng-app="app"> <div ng-class="['page', pageClass]" ng-view> </div> <script type="text/ng-template" id="intro.html"> INTRO <div ng-click="next()">Next</div> </script> <script type="text/ng-template" id="page1.html"> PAGE 1 <div ng-click="next()">Next</div> <div ng-click="back()">Back</div> </script> <script type="text/ng-template" id="page2.html"> PAGE 2 <div ng-click="back()">Back</div> </script> </div>

出典

2016-12-24 04:03:49 kukkuz

私はそれを試みました、そして私は同じ結果を受けました。イントロページのスタイルは適切ですが、ページ1とページ2はありません – jalen201

これは意味がありますが、私の全目的は別のページにルーティングされていました。私のイントロページはうまくいきますが、スタイルを入れていないページをルーティングするときに使用します。更新や何かがあったかどうかわかりません – jalen201

ええ、そのようには考えなかった。ありがとう！ – jalen201

クラスは他のページでアクションを起こしていません

答えて

関連する問題