Question

我有一个场景，当我点击一个div打开的东西有一些过渡，当我点击外部DOM我需要再次关闭div有一些过渡。

HTML：

<div id='outerdiv' ng-controller="MyCtrl" >
<div ng-click="myValue=!myValue">RIGHT</div>
  <div id="one" class='animate-hide' ng-hide="myValue">
    this is just a sample div
  </div>
  {{myValue}}
</div>

JS：

var app = angular.module("myApp1", ["ngAnimate"]);
  app.controller("MyCtrl", function ($scope) {
  $scope.myValue=true;
});

CSS：

.animate-hide {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
  line-height:20px;
  opacity:1;
  padding:10px;
  border:1px solid black;
  background:white;
  position: absolute;
  left: 0;
  top: 10px;
}
.animate-hide.ng-hide {
  left: -100%;
  opacity:0;
  padding:0 10px;
}

此处.animation-hide附加div打开，.animate-hide.ng-hide附加div关闭。正好当我点击相同的元素时，div应该打开和关闭但我需要当我点击该元素时div应该打开，当我点击任何其他它应该关闭的时候。

但我不明白该怎么做这是我尝试过的一些事情 - DEMO

Answer 1

只需创建一个指令来检测div之外的任何点击。并根据这一点改变，ng-hide的价值。这是工作的plunker，对您的代码进行了一些修改。希望这会帮助你。

<强> Plunker ：https://plnkr.co/edit/dMg6PP63cafWVBtXzexd?p=preview

(function () {
    var module = angular.module('anyOtherClick', []);

    var directiveName = "anyOtherClick";

    module.directive(directiveName, ['$document', "$parse", function ($document, $parse) {
        return {
            restrict: 'A',
            link:  function (scope, element, attr, controller) {
                var anyOtherClickFunction = $parse(attr[directiveName]);
                var documentClickHandler = function (event) {
                    var eventOutsideTarget = (element[0] !== event.target) && (0 === element.find(event.target).length);
                    if (eventOutsideTarget) {
                        scope.$apply(function () {
                            anyOtherClickFunction(scope, {});
                        });
                    }
                };

                $document.on("click", documentClickHandler);
                scope.$on("$destroy", function () {
                    $document.off("click", documentClickHandler);
                });
            },
        };
    }]);
})();

当在div外部单击时，转换发生在关闭div

1 个答案: