Klassen ergreifen keine Maßnahmen auf anderen Seiten in eckigen

Ich verwende ngRoute in eckigen. Das Routing funktioniert einwandfrei, aber page 1 und page 2 werden nicht formatiert. In meiner CSS-Datei ändere ich einfach nur die Hintergrundfarbe zum Testen.Klassen ergreifen keine Maßnahmen auf anderen Seiten in eckigen

<!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>

Hier ist meine JS-Datei:

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"; 
});

Dies ist meine CSS-Datei

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

Quelle

2016-12-24 jalen201

es leicht sein wird zu debuggen, wenn Sie einen plunkr dafür setzen können. –

Die class Sie hinzufügen dynamisch ist nicht richtig - Sie ng-class Attribut verwenden sollten, wie dies:

Sehen Sie eine Demo unten - erraten Sie das Problem mit Ihrem Code beheben können jetzt:

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>

Quelle

2016-12-24 04:03:49 kukkuz

Ich habe das versucht, und ich erhielt das gleiche Ergebnis. Die Intro-Seite wird passend gestaltet, aber Seite 1 und Seite 2 nein – jalen201

das macht Sinn, aber mein ganzer Zweck war das Routing zu verschiedenen Seiten. Meine Intro-Seite funktioniert gut, aber wenn ich die Seiten route die Stile nicht kommen. Dies zu verwenden, um für mich arbeiten, aber ich bin nicht sicher, ob es ein Update oder etwas war – jalen201

ja, Ihre Art alles zu schreiben war besser, ich Ich habe nicht so darüber nachgedacht. Vielen Dank ! – jalen201

Klassen ergreifen keine Maßnahmen auf anderen Seiten in eckigen

Antwort

Verwandte Themen