Question

我创建了一个指令，允许tab进入文本字段，它也是必需的。问题是错误正在显示/隐藏，但即使表单无效，按钮也不会被禁用。在这里查看js fiddle http://jsfiddle.net/c5omqx4t/3/

重现的步骤：

1) Select input box
2) Press Tab key
3) Press Backspace key
issue: Error is still here but the button is enabled

这是html代码

<div ng-controller="helloController">
        <h1>{{hello}}</h1>
        <form name="createForm">
            <div ng-if="providerMediumType != 'XML_API'">
            <input name="cSep" ng-model="cSep" type="text" class="form-control" allow-tab required ng-maxlength="10" />
            <p ng-show="createForm.cSep.$invalid && !createForm.cSep.$pristine" class="error">Column separator required (1-10 characters)</p>     
        </div>
            <input type="button" ng-disabled="createForm.$invalid" value="Go" />
        </form>
    </div>

Answer 1

解决方案1：

只需使用ng-show代替ng-if。因为ng-if在这里创建一个新范围。

<div ng-controller="helloController">
        <h1>{{hello}}</h1>
        <form name="createForm">
            <div ng-show="providerMediumType != 'XML_API'">
            <input name="cSep" ng-model="cSep" type="text" class="form-control" allow-tab required ng-maxlength="10" />
            <p ng-show="createForm.cSep.$invalid && !createForm.cSep.$pristine" class="error">Column separator required (1-10 characters)</p>     
        </div>
            <input type="button" ng-disabled="createForm.$invalid" value="Go" />
        </form>
    </div>

Demo link

解决方案2：

或者只是将输入字段拉入DIV内部标记

Demo link2

<div ng-controller="helloController">
        <h1>{{hello}}</h1>
        <form name="createForm">
            <div ng-if="providerMediumType != 'XML_API'">
            <input name="cSep" ng-model="cSep" type="text" class="form-control" allow-tab required ng-maxlength="10" />
            <p ng-show="createForm.cSep.$invalid && !createForm.cSep.$pristine" class="error">Column separator required (1-10 characters)</p>   
            <input type="button" ng-disabled="createForm.$invalid" value="Go" />  
        </div>

        </form>
    </div>

解决方案3：

使用controller as语法来实现此目的。 helloController中的小变化也是如此。请注意，this.providerMediumType代替$scope.providerMediumType。

<body ng-app="HelloApp">
    <div ng-controller="helloController as vm">
        <h1>{{hello}}</h1>
        <form name="createForm" method="POST" action="/form.php">
            <div ng-if="vm.providerMediumType != 'XML_API'">
            <input name="cSep" ng-model="vm.cSep" type="text" class="form-control" allow-tab required ng-maxlength="10" />
            <p ng-show="createForm.cSep.$invalid && !createForm.cSep.$pristine" class="error">Column separator required (1-10 characters)</p>     

        </div>
            <input type="submit" ng-disabled="createForm.$invalid" value="Go" />

        </form>
    </div>
</body>



angular.module('HelloApp', ['components']).controller('helloController',helloController);

function helloController($scope) {
    $scope.hello = 'Hello Me!';
    this.providerMediumType = 'XML_API';    
}

Demo with ng-if

Answer 2

找到解决方案。在指令中使用c。$ apply（）而不是c。$ digest（）

ng-disabled无法正常工作

2 个答案: