8

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

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

使用这种方法会导致 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

4

4 回答 4

4

@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>

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

于 2015-09-22T16:56:12.630 回答
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

于 2015-09-22T17:11:00.750 回答
0

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

$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>

于 2015-09-22T16:34:23.427 回答
0

我认为问题在于你不能像那样绑定 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

于 2015-09-22T16:46:40.543 回答