AngularJS ng-style 运行两次？答案

【问题标题】：AngularJS ng-style running twice?AngularJS ng-style 运行两次？
【发布时间】：2016-04-08 00:28:24
【问题描述】：

我的 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

【问题讨论】：

什么告诉你它被调用了两次？我没有看到任何明显的迹象表明 randomWidth 被调用了两次。您是否进行了硬刷新？
我认为 tt 将在每个摘要循环中调用 - 看看控制台中的错误。
正如 Alon 所说，您错误地假设 ng-style 只会评估一次 randomWidth()。不是这种情况。 ng-style 将在有理由怀疑结果值可能已更改时重新评估它。如果您希望它们被修复，您应该预先计算随机宽度并将它们分配为$scope 上的属性。
我得到错误：[$rootScope:infdig] 并且在控制台日志中记录了 12 个宽度，而应该只有 6 个
或许能帮到你stackoverflow.com/questions/21586369/…

标签： javascript angularjs ng-style

【解决方案1】：

查看此更新的代码笔 - 您需要在 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()
    }
  ];
})

【讨论】：

准确！但也许还要在视图上添加必要的更改？

【解决方案2】：

我认为这个问题已经足够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.

【讨论】：

顺便说一句，代码示例中显示的infdig 错误意味着存在无限的摘要——因为randomWidth() 的随机结果，随后的两个摘要永远不会稳定。
感谢您提供本文的链接，这是有道理的，为什么它现在运行了两次该功能。