CODEWITHSUNDEEP
javascriptjqueryangularjs
Adam Zerner
Adam Zerner

Reputation: 19178

How do you disable an img in Angular?

I have an img that has an attribute directive that handles click events. I want to be able to disable and enable the handler. How do I do that?

JS

.directive('choose', function() {
    return {
        restrict: 'A',
        link: function(scope, el, attrs) {
            el.on('click', function() {
                scope.$apply(function() {
                    // stuff
                    // disable el
                });
            });
        }
    };
})
.controller('QuizCtrl', function ($scope, Quiz, $routeParams) {
    this.next = function() {
        // enable ALL els
    };
});

HTML

<img choose />
<button ng-click="q.next()">Next</button>

Upvotes: 0

Views: 1727

Answers (2)

SM Adnan
SM Adnan

Reputation: 565

You can do it using css also:

JS

.directive('choose', function() {
    return {
        restrict: 'A',
        link: function(scope, el, attrs) {
            el.on('click', function() {
                scope.$apply(function() {});
            });
            scope.enable = function(){
                el.css({pointerEvents: ''});
            };
            scope.disable = function(){
                el.css({pointerEvents: 'none'});
            };
        }
    };
})

Upvotes: 1

Manuel J
Manuel J

Reputation: 59

I would suggest placing an overlay on the image after image have been clicked

HTML

<div ng-if='disablerToggle' class='disabler'>
    <img choose />
    <button ng-click="q.next()">Next</button>
</div>

CSS

.disabler
{
    width:fitToImageButton;
    height:fitToImageButton;
    opacity: 0.5;
    z-index:10;
}

Angular Controller

.controller('QuizCtrl', function ($scope, Quiz, $routeParams) {
    this.next = function() {
        $scope.disablerToggle = true;
        // enable ALL els
    };
});

Hope I helped!

Upvotes: 0

Related Questions