AngularJSスタイルは2回実行されますか？

Question

私はrandomWidth（）関数で2回呼び出すことに問題があります。これは、まだ2回呼び出されている要素から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

これはcodepen更新を参照してください - あなたは一度画像につき、あなたのJSにrandomWidthを呼び出す必要があります。あなたが設定したやり方では、最初に呼ばれ、ダイジェストサイクルをトリガーする要素を修正し、randomWidthなどの呼び出しをトリガーします。これは、無限ループを検出するためAngularが停止するまで続きます。

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

HTMLに変更：JSへ

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

変更：？

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

Answer 2

私はこの質問はすでに十分answeredをされていると思います。

このarticleを$digestでご覧になることをお勧めします。

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.