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

directive

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

When I clicked on span directive change class to active or remove it.

How can I catch outside click event and remove active class by angular way?

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

directive

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

When I clicked on span directive change class to active or remove it.

How can I catch outside click event and remove active class by angular way?

• javascript
• angularjs

Share Improve this question Follow edited May 20, 2015 at 8:39 user3563581 asked May 20, 2015 at 8:20 user3563581user3563581 6711 silver badge77 bronze badges 2

• 1 Why not using only ng-class? it's seems that it does what you want – Patrick Ferreira Commented May 20, 2015 at 8:24
• You can also bind 'blur' event to your element – Ararat Harutyunyan Commented May 20, 2015 at 8:36

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

You can have a click handler added to the document object along stopPropagation() of the element click.

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

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

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./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

You have some missing ending characters on your directive. See this working fiddle

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

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

Using the ng-class and some filters to extract selected values

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

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

    $scope.selectAll = function() {
      angular.forEach(
        $scope.carrencies, function(carrency) {
          console.log('ici')
          carrency.active = true;
        });
    }
  }
]);

.active {
  background-color: green;
  color: orange;
}

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="App" ng-controller="exchangeFormCtr">
  <span ng-click="selectAll()">select all!</span>
  <p ng-repeat="selected in carrencies">
    <span ng-class="{active: selected.active}" 
          ng-click="selected.active = !selected.active">
      {{selected.name}}
      {{selected.active}}
    </span>
  </p>

  <p>actives are : <span>{{ carrencies | filter: {active:true} }}</span></p>
</div>