Question

我需要更改主页的颜色（即登录后的登陆页面），这应该反映所有页面。在主页上会有颜色列表，以便用户可以选择任何颜色，这应该反映所有页。

我已在主页中创建了下拉颜色，并且该页面中的颜色正在变化，现在我需要将所有页面反映为相同的颜色。在下面的代码中，用户可以选择一种颜色并且它反映同一页面但是当我使用超链接移动到home1.html页面时我也需要这个页面中的sae颜色我怎么能得到这个......

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://www.w3schools.com/lib/w3.js"></script>
</head>
<body ng-app="myApp" >
<div ng-controller="myCtrl">
    <h4>
        <small>color box</small>
    </h4>
    <select ng-model="color">
        <option value="">--- Select a color ---</option>
        <option value="{{c}}" style="background-color:{{c}}"
                ng-repeat="c in colors">
            {{c}}
        </option>
    </select>
    <p>Selected color: <b style="color:{{color}}">{{color}}</b></p>
    <div style="background-color:{{color}}">

       <div class="square" style="background-color:{{color}}">

<a href="home1.html">Visit our page </a>
</div>

</div>

</div>
</body>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
    $scope.colors = ['Blue', 'Cyan', 'Green', 'Orange', 'Pink', 'Purple', 'Red'];
    $scope.objects = [
        {id: 1, color: 'Blue'},
        {id: 2, color: 'Cyan'},
        {id: 3, color: 'Green'},
        {id: 4, color: 'Orange'},
        {id: 5, color: 'Pink'},
        {id: 6, color: 'Purple'},
        {id: 7, color: 'Red'}
    ];

});



</script>
<style>
p { background-color: LightGray; }

.blue   { background-color: Blue; }
.cyan   { background-color: Cyan; }
.green  { background-color: Green; }
.orange { background-color: Orange; }
.pink   { background-color: Pink; }
.purple { background-color: Purple; }
.red    { background-color: Red; }


.square {
    background: #000;
    width: 20vw;
    height: 10vw;
}
.square h1 {
    color: #fff;
}
</style>

Answer 1

在$rootscope.color中设置颜色变量，用作下拉列表的ng模型。然后它将可用于您可以使用它的所有州或页面。

Answer 2

如果您的应用是单页应用，您可以设置像$rootscope.color这样的颜色变量，并从其他页面访问它。
使用多页应用程序，要将页面中的颜色数据存储到其他页面，您需要存储在客户端中的内容，如cookie，localStorage等。

动态改变体色，应该反映在角度js的每一页中

2 个答案: