Question

我有一个img，它有一个处理点击事件的属性指令。我希望能够disable和enable处理程序。我该怎么做？

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>

Answer 1

您也可以使用css：

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'});
            };
        }
    };
})

Answer 2

我建议在点击图像后在图像上放置叠加层

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;
}

角度控制器

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

希望我帮忙！

你如何在Angular中禁用img？

2 个答案: