Angular: Add ngClick from js

Question

I am developing small web page for mobile devices with Angular. I want to toggle click listener for whole page like

$('.page').on('click',...);
$('.page').off('click',...);

but in Angular way. And I don't want to use ng-Click with some conditions because most of the time the click should not work, it is just for error handling. Is it possible or I need to user pure js/jQuery?

Panel HTML:

<div class="alert error" ng-show="errorMessage">
    <div class="alert-text">{{ errorMessage }}</div>
</div>

In what conditions you need to bind/unbind the event listener? — Ilan Frumer
– Ilan Frumer, Commented Jan 30, 2014 at 13:34
If some error happens then panel with error description will be shown and click listener should be bind. After click the panel will be disappear and event should be unbind. — pas_art
– pas_art, Commented Jan 30, 2014 at 13:40
So this is something that is only related to this panel. can you show the markup of this panel? — Ilan Frumer
– Ilan Frumer, Commented Jan 30, 2014 at 13:42
Of course, if it is only related with the panel I'd just add ngClick on this panel. But I have requirement to close the panel after click on any place in page — pas_art
– pas_art, Commented Jan 30, 2014 at 13:47

Ilan Frumer · Accepted Answer · 2014-01-30 14:33:13Z

2

I created a directive:

It should be used in conjunction with ngIf.
ngIf should refer to an assignable variable on the scope
For example don't do this: ng-if='myFunc()' or ng-if='var1 || var2'

here is a plunker: http://plnkr.co/edit/fmNH2PbRrruRqGFYiui1?p=preview

Directive:

app.directive('errorBox', function($document, $parse){
  return {
    link: function(scope,elm,attrs) {
      var clickHandler = function(){
        scope.$apply(function(){
           $parse(attrs.ngIf).assign(scope.$parent,'')
        })
        $document.off('click', clickHandler);
      };

      $document.on('click', clickHandler)
    }
  }
});

html:

<div ng-if="errorMessage" error-box class="alert error">
  <div class="alert-text">{{ errorMessage }}</div>
</div>

edited Jan 30, 2014 at 14:33

answered Jan 30, 2014 at 14:22

Ilan Frumer

32.4k8 gold badges73 silver badges84 bronze badges

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

Comments

Dieterg · Accepted Answer · 2014-01-30 14:21:47Z

0

You can add a $scope variable that keeps track if it's 'allowed' to click. Then you can do something like this

<div ng-click="isDisabled || yourAction()"></div>

answered Jan 30, 2014 at 14:21

Dieterg

16.4k3 gold badges34 silver badges50 bronze badges

Collectives™ on Stack Overflow

Angular: Add ngClick from js

2 Answers 2

I created a directive:

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

I created a directive:

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related