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

【问题标题】：Sharing the $scope value between controller and directive在控制器和指令之间共享 $scope 值
【发布时间】：2015-05-03 06:18:02
【问题描述】：

我有一个指令可以切换我使用 ng-show 的 DIV。现在，当 DIV 在 5 秒后可见时，我希望它淡出。 ng-show 是在我的控制器 ($scope.showPopover) 中使用 $scope 变量切换的，它是一个布尔值，它是真或假。这是我的 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，因为这可以防止我不得不双击切换弹出框的原始链接（因为它是 false，我们切换为 true，动画隐藏DIV 但 scope.showPopover 或 $scope.showPopover 仍然正确）。我已经尝试在我的指令中设置scope.showPopover = false，但这并没有在控制器中更新。当我尝试强制使用 scope.$apply();我在控制台中收到一条错误消息，指出 Error: [$rootScope:inprog] $digest already in progress。我做错了什么？

在删除 css 类后，我尝试在承诺中设置此项，当我取消注释 scope.showPopover = false（在 newValue === true 条件下）时，手表看不到这种变化，下次我切换时手表会中断视图中的$scope.showPopover。似乎没有任何效果，我认为我的方法是错误的！有任何想法吗？非常感谢！

【问题讨论】：

查看您的代码，您似乎正在使用共享范围，当您使用“showPopover”的原语与遵循“。”使用对象的规则（即“vm.showPopover”）。
另一种解决方案是，如果“popover”具有隔离范围，则需要通过属性将原始对象传递到指令中。

标签： javascript angularjs

【解决方案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

【讨论】：

【解决方案2】：

您应该尝试在指令中使用 2-way 绑定

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                
           }
        });
      }
  };
});

【讨论】：