Question

我有一个指令，可以使用ng-show切换我使用的DIV。现在当DIV在5秒后可见时我希望它淡出。使用我的控制器中的ng-show变量（$scope）来切换$scope.showPopover，这是一个布尔值，它是true或false。这是我的HTML：

你好世界，我很满意，但5秒后会去！

当我尝试使用返回ng-if生成的注释的元素时，您会注意到自定义指令在我的指令中的子div上。这是我的指示

.directive('fadeAnimation', function ($animate) {
        'use strict';
        return{
            restrict: 'A',
            priority: 800,
            link: function (scope, element) {

                scope.$watch('showPopover', function (newValue) {

                    console.log(scope.showPopover); // same as scope.showPopover in the controller

                    if (newValue === true) {    
                        $animate.addClass(element[0].parentNode, 'fade-animiate').then(function () {
                            $animate.removeClass(element[0].parentNode, 'fade-animiate');
                            //scope.showPopover = false;
                            // scope.$apply(); // this produces  Error: [$rootScope:inprog] $digest already in progress
                        });

                    } else if (newValue === false) {
                        //scope.showPopover = false;
                        // scope.$apply(); // this produces  Error: [$rootScope:inprog] $digest already in progress
                    }

                });
            }
        };
    });

正如您所看到的，我向父元素添加和删除CSS类（带动画）。一旦完成，我想将控制器中的scope.showPopover布尔值设置为false，因为这可以防止我双击切换弹出窗口的原始链接（因为它是假的，我们切换到true，动画隐藏DIV但scope.showPopover或$scope.showPopover仍为真。我已经尝试在我的指令中设置scope.showPopover = false但是在控制器中没有更新。当我尝试强制范围时。$ apply（）;我在控制台中收到错误，指出Error: [$rootScope:inprog] $digest already in progress。我做错了什么？

我在删除css类后尝试在承诺中设置此功能，当我取消注释scope.showPopover = false（在newValue === true条件下）时，手表看不到此更改并且手表中断了下次我在视图中切换$scope.showPopover。似乎没有什么工作，我认为我的方法是错误的！有任何想法吗？非常感谢提前！

Answer 1

不确定它是否符合您的要求，我使用动画挂钩来触发淡入淡出：

<强>的Javascript

app.directive('fadeAnimation', function ($timeout) {
  return {
      restrict: 'A',
      link: function(scope, element, attr) {
        element.addClass('fade-animation');
        scope.$watch(attr.ngShow, function (value) {
            if(value){
              $timeout(function(){ scope.showPopover = false; },5000);
            }
        });
      }
  };
})

<强> CSS ：

.fade-animation.ng-hide-add.ng-hide-add-active,
.fade-animation.ng-hide-remove.ng-hide-remove-active {
  -webkit-transition: all linear 1s;
  transition: all linear 1s;
}

.fade-animation {
   opacity: 1; 
}

.fade-animation.ng-hide {
   opacity: 0; 
}

<强> DEMO

Answer 2

您应该尝试在指令中使用双向绑定

HTML

<div ng-show="showPopover" class="popover" fade-animation show-popover="showPopover">Hello World, I am content but will go after 5 seconds!</div>

指令

    app.directive('fadeAnimation', function() {
  return {
      restrict: 'A',
      scope: {
        showPopover: "="
      },
      link: function(scope, element, attr) {
        element.addClass('fade-animation');
        scope.$watch("showPopover", function(value) {
           if(value){
           //you should be able to flip the boolean here and see it in the controller                
           }
        });
      }
  };
});

在控制器和指令之间共享$ scope值

2 个答案: