javascript - Angular js 动画在 <p> 标签上的 $scope 变量更新

Question

$interval(function() {
        var count = $scope.announcements.length;
        for(var i=0;i<count;i++) {
            if($scope.announcement == $scope.announcements[i].description) {
                if(i==count-1) {
                    $scope.announcement  = $scope.announcements[0].description;
                    if($scope.announcement.length >= 100) {
                        $scope.readmore     = true;
                        $scope.short_ann    = $scope.announcement.substr(0,85);
                    }
                    break;
                } else {
                    $scope.announcement  = $scope.announcements[i+1].description;
                    if($scope.announcement.length >= 100) {
                        $scope.readmore     = true;
                        $scope.short_ann    = $scope.announcement.substr(0,85);
                    }
                    break;
                }
            }
        } 
    }, 5000);

$scope.announcement 每 5 秒更新一次，我想要一个小动画，同时更改它的 ng-bind

Answer 1

创建一个指令来监视属性值的变化并执行动画。

例如:

app.directive('flash', ['$animate',
  function($animate) {
    return {
      link: function(scope, element, attrs) {

        scope.$watch(attrs.flash, function(newValue, oldValue) {

          if (newValue === oldValue) return;

          $animate.addClass(element, 'flash').then(function() {
            element.removeClass('flash');
          });
        });
      }
    };
  }
]);

用法:

<p flash="announcement" class="animated">{{announcement}}</p>

如果您知道将使用ng-bind，则替代用法是:

<p flash ng-bind="announcement" class="animated"></p>

在第二个版本中，您需要观看 attrs.ngBind 而不是 attrs.flash:

scope.$watch(attrs.ngBind, ...

请注意，此示例使用 ngAnimate 和 animate.css 来执行动画。

演示: http://plnkr.co/edit/R0dWpE0VSscqE4mJ6462?p=preview