Question

我有这段HTML代码

<html>
<head></head>
<body>
<div ng-init="controller.onInit()" style="divContainer">
    <div class="divLoading" style="vertical-align:middle" ng-show="controller.noOfLoadingInProgress > 0">
      <span class="text">  Loading ...</span> <img src="../../Styles/Images/loading.gif" />
    </div>
    <br />
    <h1>
        Test</h1>
    <div ui-view="wizardContent">
    </div>
    <!--<div class="clear">
    </div>-->
    <div>
        <a class="buttonprev" id="btnPrevious" href="#" ng-show="controller.wizard.wizardIndex > 1"
            ng-click="controller.wizard.previous()"><span>Previous </span></a>
            <a class="buttonCancel"
                id="btnCancel" href="#" ng-click="controller.wizard.cancel()"><span>Cancel </span>
            </a>
            <a class="buttonnext" id="btnNext" ng-disabled="controller.wizard.isNextInProgress"
                href="#" ng-show="controller.termsAndCondition.isTermAndConditionAccepted  && (controller.wizard.wizardIndex < controller.wizard.wizardItems.length-1)"
                ng-click="controller.wizard.next()"><span>Next</span> </a>
            <a class="buttonnext" id="btnFinish" href="#" ng-show="controller.termsAndCondition.isTermAndConditionAccepted && (controller.wizard.wizardIndex == controller.wizard.wizardItems.length-1)"
                    ng-click="controller.wizard.finish()" ng-disabled ="controller.wizard.isFinished == 1"><span>Finish</span> </a>
    </div>
</div>
</body>
</html>

这段javascript代码。

var WizardItem = function (manager, uiState) {
    this.manager = manager;
    this.uiState = uiState;
}

var Wizard = function ($state, onFinishCallback, wizardItems) {
    var self = this;

    self.onFinishCallback = onFinishCallback;
    self.wizardItems = wizardItems;
    self.wizardIndex = 0;
    self.isNextInProgress = false;
    self.isFinished = 0;

    self.refresh = function () {
        $state.go(wizardItems[self.wizardIndex].uiState);
    };
    self.next = function () {
        if ((self.wizardIndex < wizardItems.length - 1) && wizardItems[self.wizardIndex].manager.validate()) {
            if (wizardItems[self.wizardIndex].manager.overrideNext == null) {
                self.wizardIndex++;
                $state.go(wizardItems[self.wizardIndex].uiState);
            }
            else {
                self.isNextInProgress = true;
                wizardItems[self.wizardIndex].manager.overrideNext(onFinishCallBack);
            }
        }

        function onFinishCallBack(success) {
            self.isNextInProgress = false;
            if (success) {
                self.wizardIndex++;
                $state.go(wizardItems[self.wizardIndex].uiState);
                self.isFinished = 1;
            }
        }
    }

    self.refreshWizardFrom = function (newWizardItems) {
        self.wizardItems.splice(0);
        for (var c = 0; c < newWizardItems.length; c++) {
            self.wizardItems.push(newWizardItems[c]);
        }
    }

    self.previous = function () {
        if (self.wizardIndex > 1) {
            self.wizardIndex--;
            console.log($state.go(wizardItems[self.wizardIndex].uiState));
            $state.go(wizardItems[self.wizardIndex].uiState);
        }
    };
    self.cancel = function () {
        if (confirm('Are you sure you want to cancel!')) {
            $state.go('Home');
        }
    };
    self.finish = function () {
        self.isFinished = 1;
        if ((self.wizardIndex == wizardItems.length - 1) && wizardItems[self.wizardIndex].manager.validate()) {
            //Ajmal Bug 410 - Variable flag isFinished set to 1 and being called on finish button click to disable it
            self.isFinished = 1;
            self.onFinishCallback();
            self.isFinished = 1;
            // alert('finish');
        }
    };

    self.validateCurrentWizardItem = function () {
        return wizardItems[self.wizardIndex].manager.validate();
    };

    self.initAllWizardItems = function () {
        for (var c = 0; c < wizardItems.length; c++) {
            wizardItems[c].manager.onInit();
        }
    }

    self.registerValidations = function () {
        for (var c = 0; c < wizardItems.length; c++) {
            wizardItems[c].manager.registerValidations();
        }
    };

};

我想在点击一次后禁用完成按钮。我尝试过类似的东西，但它仍然不起作用在javascript文件中，使用标志

self.isFinished = 0;

然后在完成功能

中将其设置为1

self.isFinished = 1

然后在代码的html部分使用ng-disabled

ng-disabled = "controller.wizard.isFinished == 1"

有人可以找出可能出现问题的地方吗？

由于

Answer 1

尝试执行self.wizadr.isFinished = 1;而不是self.isFinished = 1;

Answer 2

您无法禁用标记。在按钮上使用ng-disabled。还要在body

上添加ng-app指令

Answer 3

实际上，禁用标签没有任何意义，因此我决定使用此功能删除所有标签中的所有链接。

在self.finish函数中，添加了对函数的调用（粗体）

 self.finish = function () {
        if ((self.wizardIndex == wizardItems.length - 1) && wizardItems[self.wizardIndex].manager.validate()) {
            self.onFinishCallback();

            ConvertAnchorToSpan();
            // alert('finish');
        }
    };

在向导之外，在同一个javascript文件中使用该功能。

function ConvertAnchorToSpan() {
    var $link = $('a');
    var $span = $('<span>');
    $link.after($span.html($link.html())).remove();
}

它现在可以工作并阻止多次提交。我删除了javascript文件中的所有isFinished标志以及html中的ng-disabled。

Answer 4

由于锚标记没有禁用属性，因此您可以使用自定义代码。我使用ng-class代替ng-disabled它将为您的锚标记添加一个类，并在编写css代码时使此类元素禁用。

<style>
  .disabledOn {
    cursor: not-allowed;
    pointer-events: none;
    color: grey;
   }
</style>

HTML

 <a class="buttonnext" id="btnFinish" href="#" ng-show="controller.termsAndCondition.isTermAndConditionAccepted && (controller.wizard.wizardIndex == controller.wizard.wizardItems.length-1)"
                ng-click="controller.wizard.finish()" ng-class="{disabledOn : controller.wizard.isFinished == 1}"><span>Finish</span> </a>

祝你好运：）

Answer 5

ng-disabled不能用于a代码。你可以用这个

<强> HTML

<a ng-click="disabled()" class="btn" ng-class="{'disabled':disable}">Click Me</a>

<强> JS

app.controller('MainCtrl', function($scope) {
  var count=0;
  $scope.disable=false;
  $scope.disabled = function() {
  if(count>0) { return false;}else{
    alert("do someting else");
    $scope.disable=true;
    count++;
  }
}
});

<强> CSS

.disabled { cursor: default; opacity: .5; }

首次点击后，您可以使用此代码阻止点击事件。

如需参考，请点击此link

希望它对你有用。

单击事件后禁用按钮

5 个答案: