Question

私は何かをクリックするとシナリオを持ちますが、divがいくつかの遷移で開き、DOMの外側をクリックすると再び遷移を閉じる必要があります。

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：divのオープンとクローズのdivに.animate-hide.ng-hide APPEND上

ここ

.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 APPEND。私はdivを開いて閉じなければならない同じ要素をクリックしたときに私はやっていますが、その要素をクリックしてdivを開く必要があります。 DEMO

Answer 1

ちょうどあなたのdivの外のクリックを検出するためのディレクティブを作成 -

しかし、私はいけない」は、ここで が、私が試してみましたいくつかのことがあることを行う方法を理解しています。そしてそれに応じてng-hideの値を変更します。あなたのコードをいくつか変更した作業プランナーがあります。これがあなたを助けることを願っています。

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); 
       }); 
      }, 
     }; 
    }]); 
})();