在angularjs指令模板中使用ng-show對div進行動畫處理

Question

我創建了一個消息指令，該指令根據分配給指令范圍的值顯示成功和失敗消息。

標記

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

現在，消息成功顯示，並且當類型的值為value =“ success”時超時。

現在我不僅要顯示和隱藏消息，還需要slideUp和slideDown。但是當我使用element.slideDown之前，由於已經顯示了成功的div，我必須設置bool_success = true的值，在這里element.slideUp可以正常工作，因為div已經可見，但在slideDown效果期間會出現問題。 我該如何實現

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