我要完成的工作是将正文背景设置为页面加载时的随机图像。我已经尝试了服务和控制器功能。
问题是这可行,但是如果我执行诸如工具提示,单击按钮甚至在页面上打开检查器之类的操作,该方法将再次被触发。
目前:
app.service('getBodyStyle', function () {
var bgs = [
//list of jpgs
]
var rand = Math.floor(Math.random() * bgs.length);
var bg = bgs[rand];
return { "background": "linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4)), url('./Images/"+bg+"') no-repeat center center fixed" };
});
和html:
body layout="column" ng-style="getBodyStyle()" ng-controller="AppCtrl">
最佳答案
当视图中的任何模型更新时,应用程序都会刷新视图。
使用变量存储函数的结果。
<body layout="column" ng-style="bodystyle" ng-controller="AppCtrl">
或让服务记住最后的结果:
app.service('getBodyStyle', function () {
var self = this;
if (!self.bg)
{
var bgs = [
//list of jpgs
]
var rand = Math.floor(Math.random() * bgs.length);
var bg = bgs[rand];
self.bg = { "background": "linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4)), url('./Images/"+bg+"') no-repeat center center fixed" };
}
return self.bg;
});