How to call a function of AngularJS directive when click anywhere on page?

Question

I want to call close() function on click anywhere in page,but didn't work. I have written like:

var liveSearch = function () {
return {
    restrict: "A",
    scope: {
        myData: '=',
        ngModel: '='
    },
    templateUrl: "/js/app/common/template/livesearch.html",
    link: function ($scope, element, attrs) {

        var close = function() {
            $scope.status = "close";
        };

        $scope.open = function () {
            $scope.status = "open";
        };

        $(document).on('click',function(){
            close();
        });
    }
};
app.directive("liveSearch", liveSearch);

Please help to solve this problem.

Edited

<div live-search my-data="data" ng-model="typeId" ></div>

Can you share, how you are using this directive ??

seekers01
– seekers01

2016-05-26 08:35:55 +00:00
Commented May 26, 2016 at 8:35 — seekers01
– seekers01, Commented May 26, 2016 at 8:35
Please look at the edited section

vaqifrv
– vaqifrv

2016-05-26 08:39:08 +00:00
Commented May 26, 2016 at 8:39 — vaqifrv
– vaqifrv, Commented May 26, 2016 at 8:39

shershen · Accepted Answer · 2016-05-26 08:39:28Z

1

Try using this clickElsewhere directive for detecting click anywhere outside that DOM object.

directive('clickElsewhere', function($parse, $rootScope) {
        return {
            restrict: 'A',
            compile: function($element, attr) {
                var fn;
                fn = $parse(attr['clickElsewhere']);
                return function(scope, element) {
                    var offEvent;
                    offEvent = $rootScope.$on('click', function(event, target) {
                        if (element.find($(target)).length || element.is($(target))) {
                            return;
                        }
                        return scope.$apply(function() {
                            return fn(scope);
                        });
                    });
                    return scope.$on('$destroy', offEvent);
                };
            }
        };
    });

You can use it like so in your template:

<div live-search my-data="data" ng-model="typeId" click-else-where="close()"></div>

answered May 26, 2016 at 8:39

shershen

10k11 gold badges44 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vaqifrv Over a year ago

It work only textbox keydown event,not click event. This directive created for live search and when I try type for searching anything in textbox close() function call.

shershen Over a year ago

provided directive work on click - as it's stated in your question and in its code $rootScope.$on('click',...

brk · Accepted Answer · 2016-05-26 08:37:51Z

0

You can write an click handler inside link

link:function($scope, element, attrs)){
    $scope.close = function(){
  // Rest of the code
   }       
    $('body').on('click',function(event){
      $scope.close();
      })
   }

answered May 26, 2016 at 8:37

brk

50.3k10 gold badges59 silver badges85 bronze badges

Collectives™ on Stack Overflow

How to call a function of AngularJS directive when click anywhere on page?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related