AngularJS ng tarzı iki kez mi çalışıyor?

Question

benim randomWidth() işlevi ben hala iki kez çağırır benim öğesinden ng-repeat özelliğini kaldırmak bile iki kez arayarak ilgili sorunlar yaşıyorum. Bu sorunu nasıl çözeceğimi anlayamıyorum. Sanırım bunun etrafında bir yol var ya da açık bir şekilde dışarı çıkacağım bir şey var mı?

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

canlı kodu: http://codepen.io/daviddiefenderfer/pen/qZpqdK

Answer 1

bu codepen güncelleme bakın. Eğer kurdunuz yolu, onu sonsuz döngü algılar yapmamı Eğik sizi durana kadar vs vs randomWidth için başka bir çağrı tetikleyen bir özet döngüsünü tetikler sizin elemanı,,,, modifiye sona ilk kez deniyor. HTML

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

Değiştir: JS için

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

Değiştir: iki kez denilen varlık size ne

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

ben bu soru zaten yeterince answered olmuştur düşünüyorum.

ben $digest bu article bir göz alarak öneririz. Eğer resim başına bir kere, sizin JS randomWidth çağırmanız gerekir -

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.