使用AngularJS更改Android设备上的状态栏颜色_Android_Angularjs_Mobile Website_Material Design

使用AngularJS更改Android设备上的状态栏颜色

android angularjs

使用AngularJS更改Android设备上的状态栏颜色,android,angularjs,mobile-website,material-design,Android,Angularjs,Mobile Website,Material Design,一些移动网站改变Android设备中状态栏和搜索栏的颜色。例如，当我在Android 5.0设备上打开BBC移动网站时，顶部栏变为红色任何人都知道如何使用AngularJS实现这一点吗？这方面的HTML解决方案是一个简单的meta标记（使用自定义颜色）添加到HTML模板的头部部分： <meta name="theme-color" content="#0041C8"> <head ng-controller="HeadCtrl"> <meta name=

一些移动网站改变Android设备中状态栏和搜索栏的颜色。例如，当我在Android 5.0设备上打开BBC移动网站时，顶部栏变为红色

任何人都知道如何使用AngularJS实现这一点吗？

这方面的HTML解决方案是一个简单的

meta

标记（使用自定义颜色）添加到HTML模板的

头部

部分：

<meta name="theme-color" content="#0041C8">

<head ng-controller="HeadCtrl">
    <meta name="theme-color" content="{{ theme.color }}">
</head>

<html ng-app="myApp" ng-controller="MainCtrl">
    <head>
        <meta name="theme-color" content="{{ theme.color }}">
    </head>

然后将绑定添加到模板：

<meta name="theme-color" content="#0041C8">

<head ng-controller="HeadCtrl">
    <meta name="theme-color" content="{{ theme.color }}">
</head>

<html ng-app="myApp" ng-controller="MainCtrl">
    <head>
        <meta name="theme-color" content="{{ theme.color }}">
    </head>

然后为头部创建控制器，注入

主题

服务，并将其添加到作用域：

.controller('HeadCtrl', function ($scope, theme) {
    $scope.theme = theme;
})

模板绑定与选项1中的相同：

<head ng-controller="HeadCtrl">
    <meta name="theme-color" content="{{ theme.color }}">
</head>

请注意，

theme

是一个对象，而不是单个

themeColor

字符串值。这对于控制器继承很重要

然后将绑定添加到模板：

<meta name="theme-color" content="#0041C8">

<head ng-controller="HeadCtrl">
    <meta name="theme-color" content="{{ theme.color }}">
</head>

<html ng-app="myApp" ng-controller="MainCtrl">
    <head>
        <meta name="theme-color" content="{{ theme.color }}">
    </head>

这个答案更像是在控制器之间共享数据的一个教训，但它说明了您可以将颜色数据绑定到

content

属性，客户端将更新显示的颜色

来源：

如果你能让这成为一个真正角度相关的答案，你将赢得我的支持票-通过数据绑定更改的

content=“{{themeColor}}”

是否会反映在视图中？换句话说（角度或不角度），你能继续修改标签，设备继续响应变化吗？@m59老实说，我认为角度部分无关紧要，所以我甚至没有在上下文中考虑它。谢谢你睁开我的眼睛！我已经用动态角度解更新了我的答案。这正是我所需要的。非常感谢你！