带有表达式的AngularJS ng-disabled指令不起作用答案

【问题标题】：AngularJS ng-disabled directive with expression is not working带有表达式的AngularJS ng-disabled指令不起作用
【发布时间】：2013-12-11 12:05:50
【问题描述】：

用户故事：当新用户单击“新用户”复选框并接受“条款和条件”单选按钮时，应启用“注册”按钮。

我在 angularJS 中的代码不起作用。注册按钮保持禁用状态。想知道哪里出了问题？

<!DOCTYPE html>
<html ng-app>
<head>
    <script src="lib/angular/angular.min.js"></script>
</head>
<body>

<div ng-controller="LoginCtrl">
    <div>
        <label>New User?</label>
        <input type="checkbox" ng-model="isNewUser"/>
    </div>

    <div ng-show="isNewUser">
        <label>Accept Terms and Conditions</label>
        <input type="radio" value="yes" name="tnc" ng-model="tnc"/><label>Yes</label>
        <input type="radio" value="no" name="tnc" ng-model="tnc" /><label>No</label>
    </div>

    <div>
        <input type="submit" value="Login" ng-disabled="isNewUser" >
        <input type="submit" value="Register" ng-show="isNewUser" ng-disabled="hasAcceptedTnC('{{tnc}}')">
    </div>
</div>
</body>

<script language="JavaScript">
var LoginCtrl = function ($scope) {
        $scope.isNewUser = false;
        $scope.tnc = "no";

        $scope.hasAcceptedTnC = function(value) {
            //alert(value);
            return "yes"==value;
        };
    }
</script>
</html>

【问题讨论】：

确保在您要做出决定的输入标签上添加“必需”。

标签： angularjs angularjs-directive angularjs-scope

【解决方案1】：

ng-disabled 表达式在当前范围内进行评估。因此，您应该只需要以下内容，而无需使用 {{..}} 进行任何额外插值：

    <input type="submit" 
           value="Register" 
           ng-show="isNewUser" 
           ng-disabled="!hasAcceptedTnC(tnc)">

请注意，我添加了 !，因为如果用户不接受 TnC，您可能希望禁用该按钮。

工作演示：http://plnkr.co/edit/95UiO4Rd2IMh8T1KjSQK?p=preview

下面发布了一条评论，询问如何推断何时使用 {{...}} 以及何时使用带有给定 ng-* 指令的裸表达式。不幸的是，指令中没有隐藏可以揭示该信息的句法线索。查看the documentation 将证明是查找此信息的最快方法。

【讨论】：

这意味着如果在 ng-disabled 中使用的布尔变量在父范围内，不会工作是吗？
@KuganKumar 除非在两者之间有 isolated 范围指令。在作用域上定义的值（至少在被读取时）可以无缝继承到任何子作用域。

【解决方案2】：

if ($scope.Data.length > 0)
  $scope.isNewUser = true;
else $scope.isNewUser = false;

<md-button class="md-raised md-primary" 
            ng-click="Search()" 
            ng-disabled="!isNewUser" 
            aria-label="pause">Assign </md-button>

【讨论】：

【解决方案3】：

我尝试从上述解决方案中寻求帮助，但没有奏效。所以我找到了另一个解决方案。通过在该元素的 CSS 中添加以下代码，解决了我的问题指针事件：无；

一般来说：-

 element[disabled]{
  pointer-events: none;
 }

【讨论】：

这违背了 ng-disabled 处理这个对你来说更好的概念。