AngularJS：$ rootScope：在ng-repeat中调用ng-style函数时出现infdig错误

Question

我正在尝试在一些短语上构建动画，这些短语将显示在网站主页上，随机位置以及淡入淡出和翻译效果。

我将使用ng- repeat属性中的ng-style属性并设置ng-style值来调用在HomeController中定义的JavaScript函数。

使用此approch会导致angular抛出异常： $ rootScope：infdig error 10 $ digest（）迭代达到。 中止！ 观察者在最近5次迭代中被解雇

我读了很多关于这个，但没有解决方案解决了我的情况。 有人可以帮帮我吗？

这是index.html的一部分：

<div class="phrasesContainer" animate-phrases="">
      <h3 class="flying-text" ng-repeat="phrase in Phrases" ng-style="getTopLeftPosition()">{{phrase}}</h3>
    </div>

这是控制器功能：

$scope.getTopLeftPosition = function() {
var top = randomBetween(10, 90);
var left = getRandomTwoRange(5, 30, 70, 80);

return {
  top: top + '%',
  left: left + '%'
};

}

这是一个演示： http ： //plnkr.co/edit/8sYks589agtLbZCGJ08B？p = preview

Answer 1

@Hieu Le暗示了这个问题，但问题是因为你总是在getTopLeftPosition函数中返回一个随机位置，所以每次都会调用angularjs摘要循环来实际将更改传播给观察者。 这导致它一直在反复运行。

你可以做的是预先计算你的随机位置，然后在你的HTML中使用它。

例如，在您的激活功能中，您可以执行以下操作：

  function activate() {
    $scope.Phrases = ["Phrase 1", "Phrase 2", "Phrase 3", "Phrase 4", "Phrase 5", "Phrase 6"];
    $scope.PhrasesAndPositions = $scope.Phrases.map(function(phrase){
      return {
        phrase: phrase,
        position: getTopLeftPosition()
      }
    });
  }

然后你可以将你的html改为这样的：

    <div class="phrasesContainer" animate-phrases="">
      <h3 class="flying-text" ng-repeat="pap in PhrasesAndPositions" ng-style="pap.position">{{pap.phrase}}</h3>
    </div>

以下是我的更改工作： http ://plnkr.co/edit/FD9hYX9Q5wUkW2q7y86M? p= preview

Answer 2

这是一个解决方案，我将您的样式生成移动到指令中。 在显示元素之前正在设置位置。 由于这是一个CSS更改，我也修改了样式，以便位置不会转换。

这是指令。 我排除的代码没有改变：

app.directive('animatePhrases', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      setTimeout(function() {
        ...
      }, 1000);

      function changeText() {
        var currentActive = $('.phrasesContainer .active');
        var nextActive = currentActive.next();
        currentActive.toggleClass('active');

        if (nextActive.length == 0)
          nextActive = $('.phrasesContainer .flying-text').first();

        nextActive.css(getTopLeftPosition()); // Add this
        nextActive.toggleClass('active');

        setTimeout(changeText, 5000);
      }

      function getTopLeftPosition() {
        ...
      }

      function getRandomTwoRange(firstStart, firstEnd, secondStart, secondEnd) {
        ...
      }

      function randomBetween(min, max) {
        ...
      }
    }
  };
});

CSS：

.flying-text {
    transition: opacity 2s ease-in-out, margin 2s ease-in-out;
    position: absolute;
    opacity: 0;
    font-size: 1.5em;
}

在您的HTML中，只需删除ng-style 。

Plunker： http ：//plnkr.co/edit/bZB3A5hD7Bc4r4pp1g7V？p = preview

Answer 3

这样你就可以管理你的风格

$scope.getTopLeftPosition = function() {
$scope.top = randomBetween(20, 90);
$socpe.left = getRandomTwoRange(5, 30, 70, 80);

}

function getRandomTwoRange(firstStart, firstEnd, secondStart, secondEnd) {
var isLower = (Math.random() * 2) < 1;
if (isLower)
  return randomBetween(firstStart, firstEnd);
else
  return randomBetween(secondStart, secondEnd);
}

function randomBetween(min, max) {
 return Math.floor(Math.random() * (max - min + 1)) + min;
}


<body>
<div ng-controller="HomeController">
  <div class="row" style="height:100%">
    <div class="phrasesContainer" animate-phrases="">
      <h3 class="flying-text " ng-repeat="phrase in Phrases" ng-style="{ 'top' : top, 'left' : left }">{{phrase}}</h3>
    </div>
  </div>
</div>

Answer 4

我认为问题是你不能像那样绑定ng-style。 它认为它需要不断调用getTopLeftPosition。

我在这里得到了一些工作。 时机有点偏，但没有更多的错误。 在这里我使用$ interval重复一些事情：

请在此处查看： http ： //plnkr.co/edit/B4iMZXMvZFoYMCKNvVrc？p = preview

  $scope.phrase_style = getTopLeftPosition();

  function change_phrase_style() {
      $scope.phrase_style = getTopLeftPosition();
  }

  function start_interval() {
      change_phrase_style();
      $interval(function(){
          change_phrase_style();
      }.bind(this), 5000); 
  }

  setTimeout(start_interval, 1000);

这也可能是相关的：当没有范围改变时，angularjs无限$ digest循环

AngularJS：$ rootScope：在ng-repeat中调用ng-style函数时出现infdig错误

问题描述

4 个解决方案

解决方案1
4 2015-09-22 16:56:12

解决方案2
2 已采纳 2015-09-22 17:11:00

解决方案3
0 2015-09-22 16:34:23

这样你就可以管理你的风格

解决方案4
0 2015-09-22 16:46:40

AngularJS：$ rootScope：在ng-repeat中调用ng-style函数时出现infdig错误

问题描述

4 个解决方案

解决方案1 4 2015-09-22 16:56:12

解决方案2 2 已采纳 2015-09-22 17:11:00

解决方案3 0 2015-09-22 16:34:23

这样你就可以管理你的风格

解决方案4 0 2015-09-22 16:46:40

解决方案1
4 2015-09-22 16:56:12

解决方案2
2 已采纳 2015-09-22 17:11:00

解决方案3
0 2015-09-22 16:34:23

解决方案4
0 2015-09-22 16:46:40