某些移动网站会更改Android设备中状态栏和搜索栏的颜色。例如，当我在Android 5.0设备上打开BBC移动网站时，顶部栏会变为红色。
任何人都知道如何使用AngularJS实现这一目标？
答案 0 :(得分：6)
HTML解决方案是将一个简单的meta标记（带有您的自定义颜色）添加到html模板的head部分：
<meta name="theme-color" content="#0041C8">
请注意，目前这对于使用＆＃34;合并标签和应用＆＃34;在Android 5.0及更高版本上运行Chrome的用户来说只会产生效果。设置。
如果希望颜色是动态的，可以将其绑定到Angular控制器中的值。当值发生变化时，显示的颜色也会发生变化。有几种不同的方法可以实现这一目标（这是一个非详尽的清单）。
head - 范围控制器在此方法中，我们创建一个绑定到模板head的控制器。由于head没有任何UI组件，因此我们无法直接在用户操作的范围内更改颜色值。 （我们可以通过侦听来自其他控制器的事件或注入共享服务来间接完成此操作。）但是，此方法对于在加载时设置计算颜色仍然很有用。例如，我们可以根据一天中的时间更改颜色。
首先，为头部创建一个控制器：
.controller('HeadCtrl', function ($scope) {
$scope.theme.color = calculateColor();
function calculateColor() {
var hour = (new Date()).getHours();
var lightness = Math.sin(hour / 24 * Math.PI) * 100;
return 'hsl(200, 25%, ' + lightness + '%)';
}
})
然后将绑定添加到模板中：
<head ng-controller="HeadCtrl">
<meta name="theme-color" content="{{ theme.color }}">
</head>
head - 带服务的范围控制器如上所述，有一些方法可以将用户操作与其他控制器绑定到HeadCtrl上的颜色值。此方法使用服务使颜色可由其他控制器配置。
首先，使用初始颜色值创建服务：
.service('theme', function () {
this.color = '#0041C8';
})
然后为头部创建一个控制器，注入theme服务，并将其添加到范围：
.controller('HeadCtrl', function ($scope, theme) {
$scope.theme = theme;
})
模板绑定与选项1中的相同：
<head ng-controller="HeadCtrl">
<meta name="theme-color" content="{{ theme.color }}">
</head>
您现在可以将服务注入其他控制器。对这些控制器中theme.color的任何更改都将反映在meta标记中。
html - 范围控制器此方法使用嵌套控制器的原型继承，使主题颜色可供其他控制器更改。
首先，使用初始颜色值创建控制器：
.controller('MainCtrl', function ($scope) {
$scope.theme = {
color: '#0041C8'
};
})
请注意，theme是一个对象，而不是一个themeColor字符串值。这对控制器继承很重要。
然后将绑定添加到模板中：
<html ng-app="myApp" ng-controller="MainCtrl">
<head>
<meta name="theme-color" content="{{ theme.color }}">
</head>
您的其他控制器现在将继承theme上的$scope，因此您可以更改控制器中的$scope.theme.color或模板中的theme.color。例如，这会创建一个按钮，在单击时将颜色更改为红色：
<div ng-controller="SomeOtherCtrl">
<!-- ... -->
<button ng-click="theme.color = '#FF0000'">Red</button>
</div>
这个答案最终成为了在控制器之间共享数据的一个教训，但它说明了您可以将颜色数据绑定到content属性，客户端将更新显示的颜色。
来源：HTML5 Rocks