我有一个非常基本的表单,其中是一个上传文件的输入(在这种情况下是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
尝试使用点(.)。比如在你的控制器中,你会有这样的内容:
(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>