Question

我在角度中使用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; 
}

Answer 1

您动态添加的import random >>> nv = [random.randint(1, 10) for _ in range(5)] >>> print(nv) [4, 2, 10, 5, 3] >>> print(your_func(nv)) [ 1 2 3 4 1 2 1 2 3 4 5 6 7 8 9 10 1 2 3 4 5 1 2 3] 是不对的 - 您应该使用class这样的属性：

ng-class

请参阅下面的演示 - 猜测您现在可以解决代码问题：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

类没有在角度的其他页面上采取行动

1 个答案: