我在 Angular 中使用 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;
}
最佳答案
您动态添加的 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>关于javascript - 类没有对 Angular 其他页面采取行动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41310204/