AngularJS와

Question

내가 클릭에 <div ng-show=appearOnChoice>을 표시하고 다시 클릭하면 다시 전환 버튼

<button type="button" ng-click="chooseOptions()" id="chooseOptionButton" ng-bind="whatToDisplay()"></button> 

을 만들어 NG는 클릭!

$scope.chooseOptions=function(){ 
    $scope.appearOnChoice=!$scope.appearOnChoice; 

    } 

그러나 나는 또한 사용자가이 div 요소 외부의 아무 곳이나 클릭 할 때이 요소가 다시 숨길. 어떻게해야합니까? 엄격히 AngularJS를 사용하고 jQuery를 사용하지 않아야합니다.

희망 하시겠습니까?

편집 : 나는 부트 스트랩 날짜 선택기의 일부 이벤트를 적응하려고하지만 제대로

$scope.$on('datepicker.focus', focusElement); 
scope.$watch('isOpen', function(value) { 
     if (value) { 
      scope.$broadcast('datepicker.focus'); 
      scope.position = appendToBody ? $position.offset(element) : $position.position(element); 
      scope.position.top = scope.position.top + element.prop('offsetHeight'); 

      $document.bind('click', documentClickBind); 
     } else { 
      $document.unbind('click', documentClickBind); 
     } 
     }); 
    var focusElement = function() { 
    $timeout(function() { 
     self.element[0].focus(); 
    }, 0 , false); 
    }; 

가 어떻게 내 경우에이를 적용 할 수 있습니다 적용하는 방법을 잘 모르겠습니다!

Answer 1

간단히 ui 부트 스트랩 드롭 다운을 사용하여 해결했습니다. 이 옵션은 열린 옵션과 함께 제공되며 외부 클릭시 닫힙니다.

Answer 2

DIV에 포커스가있는 경우 DIV의 ng-blur 지시문을 사용하여 set appearOnChoice를 false로 실행할 수 있습니다. 그러나 DIV에 이미 포커스가 없다면 (버튼을 사용하여 표시 할 수없는 경우) 코드에서 DOM을 조작하여 포커스를 제공하거나 사용자 정의 지시문을 만들어야합니다. ng-blur 지시문이 작동하도록 포커스를 설정하십시오. this link으로 그 가능성을 확인하십시오.

또는 ng-click 지시어를보기의 클릭 가능한 모든 개체에 추가하여 해고 될 때 DIV를 숨길 수 있습니다. 하지만 그게 최선의 방법이라고 생각하지 않아요.

Answer 3

나는 함수를 작성하지 않아도된다. ng-init을 사용하여 모델을 만들고 ng-show를 사용하여 표시/숨기기를 할 수있다. div는 모델 값을 기준으로하고 ng-click은 모델 값을 변경합니다. 당신은 사용자가 다른 곳을 클릭 할 때 거짓으로 모델 값을 설정할 수 있습니다

var myapp = angular.module('myapp',[]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myapp"> 
 
<div ng-init="showDiv = true;" > 
 
    <div ng-show="showDiv"> SHOOOOOOOOW </div> 
 
    <button ng-click="showDiv = !showDiv;">Click me</button> 
 
</div> 
 
</div>

하고, 버튼을 클릭 할 때 true로 다시 설정 : 아래의 예를 참조하십시오. 당신이 쉽게 당신을 도울 수있는 피들을 만든 경우 :

Answer 4

클릭을 멀리 처리하는 가장 쉬운 방법은 요소 또는 그 자녀가 아닌 다른 요소를 제거 할 때 문서를 등록하고 이벤트를 제거하는 것입니다 클릭 함. 이이 문서의 부족에 대한하지만이처럼 사용하는 것과 서비스를 주입 한 후 GitHub EnzeyNet/Services

죄송 볼 않는 서비스의 예를 들어

.

var divElem 
nzService.registerClickAwayAction(function() { 
    divElem.remove(); 
}, divElem);