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

Answer 2

将ng-model用于p标签以显示实际数据，并使用ngAnimate或smth else ...

<p ng-model="announcement">{{announcement}}</p>

https://docs.angularjs.org/guide/animations

https://docs.angularjs.org/api/ngAnimate

Angular js在<p>标记上的$ scope变量更新上进行动画处理

2 个答案: