I disabled the div by using following code
$("#menuDiv1").children().bind('click', function(){
return false;
});
menuDiv contains
<ul>
<li><a class="home" href="#/Dashboard">Dashboard</a></li>
<li><a class="forms" href="#/ViewLeads">Lead</a></li>
<li><a class="forms" href="#/ViewCases/0">Cases</a></li>
</ul>
but now I want to enable it again. How can I do that?
And is there any other solution for the same in angular js?
you can use unbind to remove disable click event
$("#menuDiv1").children().unbind('click');
To re enable click event use below code.
function clickfunc(){
// your code
}
$("#menuDiv1").children().bind('click',clickfunc);
Second option
you can use off to remove disable click event
$("#menuDiv1").children().off('click');
To re enable click event use below code.
function clickfunc(){
// your code
}
$("#menuDiv1").children().on('click',clickfunc);
EDIT as discussed below code is avoid click event on a,button tags.
function clickfunc(event){
if(event.target.nodeName === 'A' || event.target.nodeName == "BUTTON"){
return false;
}
// your code
alert("click")
}
$("#menuDiv1").children().on('click',clickfunc);
.children().not('button')You can use unbind to disable and bind to enable again.
$("#menuDiv1").children().unbind('click');
To bind it again
$("#menuDiv1").children().bind('click', clickhander);
You better look to use jQuery.on and jQuery.off instead of bind and unbind.
In Angular you can use ng-click and ng-disabled in combination. For example:
<button ng-click="clicked()" ng-disabled="val">Click</button>
And in controller set the val to true or false to enable/disable click on the button.
$scope.val = true; //To disable button
EDIT:
For div you can do it like this:
<div ng-click="val || clicked()" ng-disabled="val">Click</div>
ng-click replace val with true. But I recommend you to use a variable for ng-disabled instead of tru so that you can modify it later.You would either unbind previously bound click event handler, or prevent event conditionally:
$("#menuDiv1").children().bind('click', function (e) {
if ($(this).hasClass('no-click')) {
e.stopPropagation();
}
});
Btw, it's better to use e.stopPropagation(); explicitly to prevent child-to-parent event bubbling, rather than implicit return false.
Based on the new information in your question, the proper way to do this in AngularJS is to use the $locationChangeStart event.
app.run(function ($rootScope, $location) {
$rootScope.$on('$locationChangeStart', function (event, next, current) {
if ($rootScope.menuDeactivated) {
event.preventDefault();
}
});
});
This is a very simplistic example of that sets a variable on the $rootScope, but you could instead run a function (helpful if you want to save form values or prompt the user before changing your route for example) or inject a service (such as if you want to check if a user is logged in), etc.
