unbind ng-click dynamically from element : angularjs

Question

i have an element which have ng-click event and on clicking it adds a div that works fine. what i want is to remove ng-click after adding the div .

one way is to use ng-if

  <div ng-click="addDiv()" ng-if="!divAdded" >                   
                        <span>i add a div</span> 
               </div>

 <div class="disabled" ng-if="divAdded" >                   
                        <span>i add a div</span> 
               </div>

for this i have to add multiple div for single element that works on and off. is there any way to unbind click event like we do in jquery dynamically?

any help will be appreciated

Joao Leal · Accepted Answer · 2015-06-10 11:05:14Z

2

You can also do this:

<div ng-click="divAdded || addDiv()" >                   
    <span>i add a div</span> 
</div>

This will prevent ng-click from calling addDiv() if divAdded is true

answered Jun 10, 2015 at 11:05

Joao Leal

5,5521 gold badge15 silver badges23 bronze badges

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

3 Comments

LionC Over a year ago

While that is possible, putting conditional statements into templates should be avoided

Joao Leal Over a year ago

That answer doesn't explain why, and nor does your comment. Can you elaborate?

LionC Over a year ago

Sure. HTML is a markup language which should describe a layout and (ideally) no behaviour at all. ng-click exists to connect an input to a controller, who has the responsibility to decide what to do with that button click. It is not the decision of the button(the view) to decide what to do with that click - that is exactly what controllers exist for and thus controllers are also the place people will look for code like that. I am pretty sure that that is also the reason why angular expressions do not support an expressive if-construct to this day - because it should not be used.

LionC · Accepted Answer · 2015-06-10 11:39:19Z

2

Put that logic into the controller, not into the view

Controller:

(function(){

function divAddController() {
    var self = this;

    self.divAdded = false;

    self.addDiv = function() {
        if(!divAdded) { 
            //Add div here
            self.divAdded = true;
        }
    }
}

angular.module("example")
.controller("divAddController", divAddController);

})();

View:

<div ng-controller="divAddController as divAdder">
    <div ng-click="divAdder.addDiv()" ng-class="{disabled: divAdder.divAdded}">
        <span>i add a div</span>
    </div>
</div>

edited Jun 10, 2015 at 11:39

answered Jun 10, 2015 at 11:00

LionC

3,1061 gold badge24 silver badges31 bronze badges

Comments

DonJuwe · Accepted Answer · 2015-06-10 11:01:56Z

0

You can do it in a more easy way like this:

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

myApp.controller('MyCtrl', function($scope) {
  $scope.showDiv = false;
});

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

<div ng-app="myApp" ng-controller="MyCtrl">
  <button ng-click="showDiv = true;">I show the div</button>
  <div ng-if="showDiv">I am visible!</div>
</div>

answered Jun 10, 2015 at 11:01

DonJuwe

4,5634 gold badges37 silver badges60 bronze badges

Collectives™ on Stack Overflow

unbind ng-click dynamically from element : angularjs

3 Answers 3

3 Comments

Controller:

View:

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Controller:

View:

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related