Question

我正在angularjs中创建一个webapp。我在这个页面上有几页，每页都有相同的页脚。问题是某些页面的内容有白色背景，有些页面有蓝色。我想知道如何相应地更改每个页面的页脚背景颜色。

这是我的index.html：

<body layout="row" ng-init="populateData();" ng-controller="MainCtrl" class="ng-cloak">
<div flex layout="column" role="main">
    <!-- Navigation Bar At Top  -->
    <nav-bar>
    </nav-bar>
    <!-- Navigation Bar Ends -->

    <!--     All Views -->
    <div ui-view layout="row" id="uiView" flex>
    </div>
    <!-- All views ends -->

    <footer  style="background-color: transparent">
        <small>© 2007-2015 xyz.com.</small>
    </footer>
</div>
</body>

以下是其中一个页面，其中background-color为蓝色：

<div layout="column" class="someclass" style="background-color: blue">
   <!--More HTML here-->
</div>

同样地，有一些页面具有背景颜色，而现在，我应该如何设置页脚的背景颜色，使其具有与在页面上显示的内容相对应的颜色。

Answer 1

在您的MainCtrl中，您可以拥有此变量

$rootScope.backColor = "#fff";

并在其他控制器中更改

$rootScope.backColor = "#00f";

并在页脚html中

<footer  ng-style="{'background-color':backColor}">
    <small>© 2007-2015 xyz.com.</small>
</footer>

如何在不同的页面上使用与背景颜色相同的不同页脚背景颜色

1 个答案: