Ami*_*nli 2 android mobile-website angularjs material-design
某些移动网站会更改Android设备中状态栏和搜索栏的颜色。例如，当我在Android 5.0设备上打开BBC移动网站时，顶部栏变为红色。
有人知道如何使用AngularJS来实现吗？
HTML解决方案是在html模板meta的head部分中添加一个简单标签（带有您自定义的颜色）：
<meta name="theme-color" content="#0041C8">
请注意，这仅对启用了“合并标签和应用”设置的在Android 5.0+上运行Chrome的用户有效。
如果希望颜色是动态的，可以将其绑定到Angular控制器中的值。值更改时，显示的颜色也会更改。有几种不同的方法可以完成此操作（这是非详尽的清单）。
head1.-作用域控制器在此方法中，我们创建一个绑定到模板的控制器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>
head2-具有服务的作用域控制器如上所述，有几种方法可以将来自其他控制器的用户操作绑定到我们的上的颜色值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标签中。
html3.-作用域控制器此方法使用嵌套控制器的原型继承来使主题颜色可用于其他控制器进行更改。
首先，使用初始颜色值创建控制器：
.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
| 归档时间： |
|
| 查看次数： |
1744 次 |
| 最近记录： |