web-dev-qa-db-ja.com

DIVのng-blur

ぼかしでDIVを非表示にしようとしています（DIVからフォーカスが削除されました）。私はangularとブートストラップを使用しています。これまでのところ、表示されているDIVに「フォーカス」を設定し、次にユーザーがクリックしたときにng-blur関数を設定してみました画面上の他の場所。これは機能しません。

基本的に問題は、JSを通じて「#lockerBox」にフォーカスを設定できないことです。「hideLocker」関数をクリックしてフォーカスがDIVに与えられた場合、問題なく機能します。

<div class="lock-icon" ng-click="showLocker(result); $event.stopPropagation();"></div>
<div ng-show="result.displayLocker" id="lockerBox" ng-click="$event.stopPropagation();" ng-blur="hideLocker(result)" tabindex="1">

  $scope.displayLocker = false;
  $scope.showLocker = function ( result ) {

    $scope.displayLocker = !$scope.displayLocker;
    node.displayLocker = $scope.displayLocker;

    function setFocus() {
      angular.element( document.querySelector( '#lockerBox' ) ).addClass('focus');
    }

    $timeout(setFocus, 100);
  };


  $scope.hideLocker = function ( node ) {
    $scope.displayLocker = false;
    node.displayLocker = $scope.displayLocker;
  };
javascriptangularjsfocusblur
11
user1876246

tabindex="-1" attrをdivに追加するだけで、入力と同じように動作します-

<div tabindex="-1" ng-blur="onBlur()"></div>

https://jsfiddle.net/ast12nLf/1/

（ここから着想- https://stackoverflow.com/a/17042452/831294 ）

23
URL87

私も同じ問題を抱えていましたが、次のコードのカスタムディレクティブでドキュメント全体の「mouseup」イベントを使用して解決できました。このコードでは、divに含まれるアコーディオンをng-show（ ）= "variable"この変数は、メニュー切り替えボタンのHTML要素、divポップアップHTML要素、およびマウスアップを処理するカスタムディレクティブ全体のキーです。

var dummyDirective = angular.module(dummyDirective, []);
dummyDirective.directive('hideOnMouseUpElsewhere', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attr) {

      $(document).mouseup(function(e) {
        var container = $(element);

        if (!container.is(e.target) // if the target of the click isn't the container...
          && container.has(e.target).length === 0 && scope.status.menuVisible // ... nor a descendant of the container
          && !(e.target.id === attr.excludeClick)) // do not execute when clicked on this 
        {
          scope.status.menuVisible = false;
          scope.$apply();
        }
      });
    }
  }
})

コンテナには、「hideOnMouseUpElsewhere」ディレクティブを適用したDOM要素と、追加された属性「excludeClick」があり、e.targetは、クリックする1つのDOM要素です。

以下は、アクロディアンのHTMLコードですbootstrap angularポップアップメニュー：

<a id="MenuAnchor" href="" data-toggle="dropdown" class="dropdown-toggle" ng-click="status.menuVisible = !status.menuVisible;">
  <i id= "MenuIcon" class="glyphicon glyphicon-cog" style="font-size:20px; color: #428bca; cursor:pointer;"></i>
</a>
<div  id ="MenuPane"  ng-blur="status.menuVisible=false;" hide-on-mouse-up-elsewhere exclude-click='MenuIcon'>
 <div class="btn-group favoritesMenu" style="width: 300px;" ng-show="status.menuVisible"  >
 <accordion close-others="true">
  <accordion-group > 
    <accordion-heading>....</accordion-heading>
    <div ng-click="status.menuVisible=false;">Data</div>
  </accordion-group>      
 </accordion>
0
user15091

結局、onclickを持つ要素にblurイベントを設定するだけになりました。

0
user1876246