gpt4 book ai didi

javascript - Angular js 动画在

标签上的 $scope 变量更新

转载 作者:行者123 更新时间:2023-11-27 23:32:26 25 4
gpt4 key购买 nike

$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

最佳答案

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

例如:

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, ...

请注意,此示例使用 ngAnimateanimate.css 来执行动画。

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

关于javascript - Angular js 动画在 <p> 标签上的 $scope 变量更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34450223/

25 4 0