无法"ng-disabled"按钮提交,我们应该知道什么可能会妨碍?



我有一个非常基本的表单,其中是一个上传文件的输入(在这种情况下是xlsx),就像这样:

<input type="file" data-file="import" name="xlfile" id="xlf" />

在整个应用程序中,我有许多表单,比这个复杂得多,而且根本没有这个问题。主要的区别是它们没有上传输入,所以这可能与此有关。

在选择一个文件时,有几个函数被调用,读取文件,检查一些信息是否正确,并在下面的引导表中显示报告以及文件的内容。

一切都在一个模态窗口中,在它的最后,有一个单一的按钮类型submit和一个ng-click指令来启动另一个函数…

我一直无法用ng-disable指令禁用此按钮,最后辞职,通过在html标签中添加属性disabled使其默认禁用。

在javascript代码中,我有这一行在一切正常的情况下执行:

document.querySelector('#myButtonId').removeAttribute('disabled')

我现在的问题是弄清楚这里发生了什么魔法!?: -)

,

这是我的第一个尝试按钮:

<button type="submit" ng-click="doThat()" ng-disabled="isItOkay">IMPORT</button>

,"isItOkay"将以false为值,在控制器开始时,当满足要求时为true(这是在文件检查通过后发生的,如果在几个函数调用后没有发生错误,其中jquery和angular正在工作(在chrome源选项卡中检查)。

第二次尝试是在阅读了一些关于ng指令中布尔值行为的深奥解释后,将变量替换为一个函数…

<button type="submit" ... ng-disabled="isItOkay()">...</button>

函数将返回真或假。

之后,我还尝试了其他类型的值,如数字或字符串…检查结果是否大于…等等……为了查看值的类型是否有作用,但是没有任何作用。

在chrome "源代码"标签,我注意到" isitok "变量有时甚至没有定义,而且大多数情况下,当代码被相关部分的书签停止时,无法访问。

这让我想到了一个可能的孤立作用域,但我对angularJS的了解还不够,无法找出问题所在。

我很抱歉我没有把代码放在这里,它是相当大的,并没有什么帮助。但如果真的有必要,请随时询问。

所以我的问题来结束这篇长文:

对于传递给ng-disabled的值,我们需要知道什么,这些值最终会阻止代码做最初合理预期的事情?

ng-disabled不是ng-disable

https://docs.angularjs.org/api/ng/directive/ngDisabled

尝试使用点(.)。比如在你的控制器中,你会有这样的内容:

(function() {
  var app = angular.module('app', []);
  app.controller(['$scope',
    function($scope) {
      $scope.flags = {
        isItOkey: false
      };
    }
  ]);
})();
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="app">
  <input type="checkbox" ng-model="flags.isItOkey" />Is It Okey?
  <br/>
  <br/>
  <button type="button" ng-disabled="!flags.isItOkey">Okey</button>
  <button type="button" ng-disabled="flags.isItOkey">Not Okey</button>
  {{flags|json}}
</body>
</html>

最新更新