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>

现在消息已成功显示，并且当类型具有值=＆＃34;成功＆＃34;。

时超时

现在不是只显示和隐藏消息我需要slideUp和slideDown.But当我使用element.slideDown时，之前我必须设置bool_success = true的值，因为已经显示了成功div，这里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>

使用angularjs指令模板中的ng-show对div进行动画处理

1 个答案: