CODEWITHSUNDEEP
javascriptangularjs
Rahul
Rahul

Reputation: 450

Make link enable and disable in angular

I Just want do opposite of this.Here is the working demo: http://jsfiddle.net/KQQD2/4/

Means,first time links should be disable and unclickable, When I checked the checkbox I just want to make link enable and clickable.

Here is the code:

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

    app.controller('appCtrl', function($scope, $window){
        $scope.disableIt = false;
        $scope.tellAboutIt = function(){
            $window.alert('ngClick fired. This alert should not show when disabled.');
        };
    });

    app.directive('disableable', function($parse){
        return {
            restrict: 'C',
            link: function (scope, elem, attrs) {
                scope.$watch('disableIt', function (val) {
                    if (!val) {
                        elem.addClass('disabled');
                        elem.css('cursor', 'default');
                        elem.bind('click', function(e) {
                            e.preventDefault();
                        });
                    }
                    else {
                        elem.removeClass('disabled');
                        elem.css('cursor', 'pointer');
                        if (typeof elem.attr('ng-click') === 'undefined')
                           elem.unbind('click');
                    }
                });
            }
        };
    });

Thanks in advance

Upvotes: 2

Views: 227

Answers (2)

Varvarigos Emmanouil
Varvarigos Emmanouil

Reputation: 757

The behavior you said was achieved by making 

"disableIt || tellAboutIt()"

to 

"disableIt && tellAboutIt()"

in the html part I found in jsFiddle.

Upvotes: 1

André Kreienbring
André Kreienbring

Reputation: 2509

You could do something like this: Given you have the value of the checkbox in your scope 

$scope.data.checkValue = false
$scope.data.url = "http://foo.com"

And in your view:

<a ng-show="data.checkValue" href="data.url">bla</a>
<p ng-show="!data.checkValue">{{data.url}}</p>

Upvotes: 0

Related Questions