我要完成的工作是将正文背景设置为页面加载时的随机图像。我已经尝试了服务和控制器功能。

问题是这可行,但是如果我执行诸如工具提示,单击按钮甚至在页面上打开检查器之类的操作,该方法将再次被触发。

目前:

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;
});

10-05 20:54
查看更多