類沒有采取角度的其他頁面上的行動

我正在使用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

類沒有采取角度的其他頁面上的行動

回答

相關問題