Question

我试图通过使用ng-style指令使我的应用程序的背景图片动态，但它产生了奇怪的结果。 body标签看起来像这样

<body ng-controller='MyCtrl' ng-style="{'background-image': getImage()}">
<div id='dateToday'>
    {{dateToday | date:'medium'}}
    </div>
</body>

这是getImage函数

$scope.getImage = function(){
  var backgrounds = ["url(app/img/butterfly.jpg)", "url(app/img/chicago.jpg)", "url(app/img/car.jpg)", "url(app/img/pug.jpg)", "url(app/img/tree.jpg)"];

      var x = Math.floor(Math.random()*backgrounds.length);
      var y = backgrounds[x];
      return y}

当我单独测试它时，它通过在每次加载页面时给出一个新的背景图像来工作，但是当我尝试使用$ interval函数来更新同一页面中的日期时，页面会再次重新加载再次产生每秒更新背景图像的不太愉快的结果。这是我正在使用的设置间隔功能

$interval(function(){
$scope.dateToday = Date.parse(new Date());
}, 1000);

我只是用它来刷新页面上的日期显示，在上面显示的div dateToday中

Answer 1

默认情况下

角度函数$interval

在$ apply块中调用fn。

因此，在调用$ apply时，将重新计算视图中的所有变量和函数，以及您的getImage，并且背景会更改

要避免此行为，您可以使用内部控制器等简单变量

$scope.bg = getImage();

和标记

<body ng-controller='MyCtrl' ng-style="{'background-image': bg}">

在这种情况下，只有在控制器启动时才会更改背景

AngularJS中的ngStyle属性和$ interval问题

1 个答案: