在 angularjs 指令模板中使用 ng-show 动画 div答案

【问题标题】：Animate div using ng-show in angularjs directive template在 angularjs 指令模板中使用 ng-show 动画 div
【发布时间】：2015-01-18 16:41:32
【问题描述】：

我创建了一个消息指令，根据分配给指令范围的值显示成功和失败消息。

标记

 <myslide msg='message' type='messagetype'></myslide>

指令

angular.module('app.directive.myslide',['']).directive('myslide',function($timeout,$scope){
return {
             restrict : 'EA',
             scope:
                     {
                         msg:'=',
                         type:'=',
                         bool_success:'@',
                         bool_error:'@',

                     },
              templateUrl:'views/Msgtemp.html?1',       
              link:function(scope, element, attrs)
              {

                 scope.$watch('msg',function(newmvalue,oldmvalue){},true);
                 scope.$watch('type',function(newtvalue,oldtvalue){
                     if(newtvalue=="success")
                     {
                         scope.bool_success=true; 
 // since bool_success is set to true element is shown so no effect of next line
                         element.slideDown(1000);
// Slide Up works completly fine since element is visible.
                         $timeout(function(){element.slideUp(1000);scope.bool_success = false;scope.type=''}, 1000);
                     }

                 },true);
              }
}
});

指令 Msgtemp.html

 <div class="slide alert alert-success col-lg-4"  ng-show="bool_success">
<a href="" class="close"  ng-click="bool_success = !bool_success">&times;</a>
<strong>Success !</strong> {{msg}}
</div>
 <div class=" slide alert alert-danger col-lg-4" ng-show="bool_error">
<a href="" class="close" ng-click="bool_error = !bool_error">&times;</a>
<strong>Error !</strong> {{msg}}
 </div>

现在消息显示成功，当类型值为“成功”时超时。

现在我想要 slideUp 和 slideDown 而不是只显示和隐藏消息。但是当我使用 element.slideDown 时，在此之前我必须设置 bool_success=true 的值，因为已经显示了成功 div，这里 element.slideUp 有效完全没问题，因为 div 已经可见但在 slideDown 效果期间出现问题。我怎样才能实现它

【问题讨论】：

标签： javascript jquery angularjs angularjs-directive angularjs-scope

【解决方案1】：

使用简单的jquery效果解决了上述问题

angular.module('app.directive.myslide',[]).directive('myslide',function($timeout){
return {
             restrict : 'EA',
             scope:
                     {
                         msg:'=',
                         type:'='
                     },
              templateUrl:'views/slideMsg.html?1',       
              link:function(scope, element, attrs)
              {

                 scope.$watch('msg',function(newmsgvalue,oldmsgvalue){},true);
                 scope.$watch('type',function(newtypevalue,oldtypevalue){
                     if(newtypevalue=="success")
                     {    
                              element.children('.alert-success').slideDown(1000,function(){
                              element.children('.alert-success').slideUp(2000);
                              scope.type='';
                         });

                     }
                     if(newtypevalue=="error")
                     {    
                              element.children('.alert-danger').slideDown(1000,function(){
                              element.children('.alert-danger').slideUp(2000);
                              scope.type='';
                         });

                     }

                 },true);
              }
}
})

将我的模板 html 更新为

<div class="alert alert-success col-lg-4" style="display: none;">
<strong>Success !</strong> {{msg}}
</div>
<div class="alert alert-danger col-lg-4" style="display: none;">
<strong>Error !</strong> {{msg}}
</div>

【讨论】：