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

Question

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

我会做到这一点使用NG风格属性的NG-重复里面的属性和设置NG-样式值调用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

这是一个解决方案，我将样式生成移至指令中。该位置是在显示元素之前设置的。由于这是 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.

笨蛋：http://plnkr.co/edit/bZB3A5hD7Bc4r4pp1g7V ?p=preview