javascript - Angular 在指令中的元素外部单击

Question

CSS

ul {
   display: none
}
span.active+ul {
   display:block
}

html

<div ng-controller='exchangeFormCtr'>
    <div toggle-class="active">
       <ul>
           <li ng-repeat='carrency in carrencies'>
       </ul>
    </div>
    <div toggle-class="active">
       <ul>
           <li ng-repeat='carrency in carrencies'>
       </ul>
    </div>   
</div>

Controller

exchange.controller('exchangeFormCtr',['$scope', function($scope) {
    $scope.carrencies = [
        {name:'mastercard'},
        {name:'visa'},
        {name:'paypal'}
    ];
}]);

指令

app.directive('toggleClass', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                console.log(element);
                element.toggleClass(attrs.toggleClass);
            });
    }
};

当我单击 span 指令时，更改类以激活或删除它。

如何捕获外部点击事件并通过 Angular 方式删除事件类？

Answer 1

您可以沿着元素点击的 stopPropagation() 将点击处理程序添加到文档对象。

var app = angular.module('my-app', [], function () {})

app.controller('AppController', function ($scope) {
    $scope.message = "Welcome";
});

app.directive('toggleClass', function ($document) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            console.log(element)

            function elementClick(e) {
                e.stopPropagation();
                element.toggleClass(attrs.toggleClass);
            }

            function documentClick(e) {
                element.removeClass(attrs.toggleClass);
            }

            element.on('click', elementClick);
            $document.on('click', documentClick);

            // remove event handlers when directive is destroyed
            scope.$on('$destroy', function () {
                element.off('click', elementClick);
                $document.off('click', documentClick);
            });
        }
    };
});

.active {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app" ng-controller="AppController">
  <span toggle-class="active">ff</span> 
</div>
asdf