Question

您好我有一个按钮需要根据条件启用或禁用。当需要禁用时，我需要显示一条消息。但是Javascript会多次触发，因此当需要只显示一次时，消息会多次显示。

下面是调用Javascript函数的标记： -

<button type="submit" class="btn btn-save nm" ng-click="controller.saveOpportunity()" ng-disabled="!(controller.canDealBeClosedByFeeAllocationStatus() && controller.isEnabled('SaveOpportunity'))">
                <svg><use xlink:href="../Content/images/c/svg-defs.svg#circle-check"></use></svg>
                Save
            </button>

以下是Javascript功能： -

canDealBeClosedByFeeAllocationStatus:()->
    if this.isReibDeal() && this.data.OpportunitySalesStageIsClose() == true
      if this.data.FeeAllocationComplete == false
        ShowMessage('warning', 'Fee Allocation needs to be complete')
      return this.data.FeeAllocationComplete
    else
      return true

这个问题的解决方案是什么？

Answer 1

使用 ng-disabled

<button ng-disabled="IsDisabled" type="submit" class="btn btn-save nm" ng-click="controller.saveOpportunity()" ng-disabled="!(controller.canDealBeClosedByFeeAllocationStatus() && controller.isEnabled('SaveOpportunity'))">
                <svg><use xlink:href="../Content/images/c/svg-defs.svg#circle-check"></use></svg>
                Save
            </button>

在您的控制器中

$scope.isDisabled=false;

在你的Javascript函数中设置$scope.IsDisabled=true;

当函数执行一次设置$scope.IsDisabled=true

Answer 2

你不应该有这么大的功能来检查某些东西是否被禁用，因为ng-disabled可能会多次检查该方法。

例如，即使您使用ng-click与禁用ng方法see console in this example

无关的内容，也可能会触发

ng-disabled

＆＃13;

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.testClick = function(){
    console.log("click which does not affect disabled flag");
  };
$scope.isDisabled=function(){
   console.log("disabled check function triggered");
   return true
   
 };
});

＆＃13;

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <div>
       <button ng-click="testClick()">Test</button>
      <button ng-disabled="isDisabled()">Test</button>
      Test {{message}}
    </div>
    
  </body>

</html>

＆＃13;

因此，更好的方法是让ng-disable监听一个标志变量，例如isDealBeClosedByFee，您可以在此过程中或在控制器初始化时更新。

如何防止多次触发Javascript

2 个答案: