Question

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

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

使用此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>

以下是我的更改的工作内容：default drawable

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 infinite $digest Loop when no scope changes

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

4 个答案:

这样你可以管理你的风格