AngularJS ng-style 运行两次？

Question

我的 randomWidth() 函数调用两次时遇到问题，即使我从我的元素中删除 ng-repeat 属性它仍然调用两次。我似乎无法弄清楚如何解决这个问题。我猜想有办法解决这个问题，或者显然我遗漏了什么？

HTML:

<div id="body-wrapper" ng-app="gallery" ng-controller="mainCtrl">
<section id="sidebar">

  <h1>Gallery</h1>

</section>

<main>
  <div class="box" ng-repeat="img in imgs" ng-style="{'width': randomWidth()}">
    <div class="box-wrapper"></div>
  </div>
</main>
</div>

Javascript:

angular.module('gallery', [])
.controller('mainCtrl', function($scope){

  $scope.imgs = [
    {
      title: 'image1'
    },
    {
      title: 'image2'
    },
    {
      title: 'image3'
    },
    {
      title: 'image4'
    },
    {
      title: 'image5'
    },
    {
      title: 'image6'
    }
  ];

  $scope.randomWidth = function(){
    const widths = ['25%', '33%', '40%', '50%'];
    const max = widths.length;
    const min = 0;
    var r = Math.floor(Math.random() * (max - min)) + min;
    console.log(widths[r]);
    return widths[r];
  }
})

实时代码：http://codepen.io/daviddiefenderfer/pen/qZpqdK

Answer 1

我觉得这个问题已经够answered了。

我建议在 $digest 上查看此 article。

Note: At a minimum, $digest will run twice even if your listener functions don’t change any models. As discussed above, it runs once more to make sure the models are stable and there are no changes.

Answer 2

查看此更新的代码笔 - 您需要在 JS 中调用 randomWidth，每个图像一次。你设置它的方式，它被称为第一次，最终修改你的元素，触发一个摘要循环，触发另一个对 randomWidth 的调用，等等，直到 Angular 停止你因为它检测到无限循环。

http://codepen.io/lwalden/pen/KzZWXK

改为HTML：

<div class="box" ng-repeat="img in imgs" ng-style="{'width': img.style}">

更改为 JS：

angular.module('gallery', [])
.controller('mainCtrl', function($scope){

  $scope.randomWidth = function(){
    const widths = ['25%', '33%', '40%', '50%'];
    const max = widths.length;
    const min = 0;
    var r = Math.floor(Math.random() * (max - min)) + min;
    console.log(widths[r]);
    return widths[r];
  }

  $scope.imgs = [
    {
      title: 'image1',
      style: $scope.randomWidth()
    },
    {
      title: 'image2',
      style: $scope.randomWidth()
    },
    {
      title: 'image3',
      style: $scope.randomWidth()
    },
    {
      title: 'image4',
      style: $scope.randomWidth()
    },
    {
      title: 'image5',
      style: $scope.randomWidth()
    },
    {
      title: 'image6',
      style: $scope.randomWidth()
    }
  ];
})

AngularJS ng-style 运行两次？

AngularJS ng-style running twice?

javascript

angularjs

ng-style

AngularJS ng-style 运行 两次？

AngularJS ng-style running twice?

javascript

angularjs

ng-style

AngularJS ng-style 运行两次？