Question

我创建了一个指令，根据某些条件检查输入是否有效。在这个表单中，我有一个ng-disabled="form.$invalid"的按钮。问题是，即使看起来填充了有效状态，当我的自定义指令更改输入的有效状态时，我的按钮也不会启用。

这是一个简单的例子：

<div ng-app="app">
  <div ng-controller="fooController">
    <form name="fooForm">
      <input type="text" ng-model="foo" foo>
      <input type="submit" value="send" ng-disabled="fooForm.$invalid">
    </form>
  </div>
</div>

JS（CoffeeScript）：

app = angular.module 'app', []

app.directive 'foo', ->
    restrict: 'A'
    require: 'ngModel'
    link: (scope, element, attrs, controller) ->
      element.bind 'keyup', ->
        if controller.$viewValue isnt 'foo'
          controller.$setValidity 'foo', false
        else
          controller.$setValidity 'foo', true

app.controller 'fooController', ($scope) ->
  $scope.foo = 'bar'

简而言之，该指令检查输入的值是否为==='foo'。如果不是，它将有效性'foo'设置为false，否则设置为true。

这是一个jsfiddle（javascript）：http://jsfiddle.net/owwLwqbk/

我找到了一个涉及$ apply的解决方案：http://jsfiddle.net/owwLwqbk/1/

但我想知道是否没有其他更好的方法呢？这个国家不应该居住吗？

Answer 1

jqLite事件处理程序在Angular的上下文之外运行，这就是为什么在它工作之前需要scope.$apply()。

另一种选择是使用手表......

link: function(scope, element, attrs, controller) {
    scope.$watch(function () { 
        return controller.$viewValue;
    }, function (newValue) {
        controller.$setValidity('foo', newValue === 'foo');
    });
}

Fiddle

Answer 2

请参阅下面的演示

＆＃13;

var app;

app = angular.module('app', []);

app.directive('foo', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ctrl) {

      ctrl.$parsers.unshift(function(val) {
        console.log(val);
        if (val == "bar") {
          ctrl.$setValidity('foo', true);
        } else {
          ctrl.$setValidity('foo', false);

        }
      });





    }
  };
});

app.controller('fooController', function($scope) {
  $scope.foo = 'bar';
});

＆＃13;

.ng-invalid-foo {
  outline: none;
  border: 1px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="app">
  <div ng-controller="fooController">
    [Only "bar" is valid value] <br/>
    <form name="fooForm">
      
      <input type="text" ng-model="foo" foo="">
      <input type="submit" value="send" ng-disabled="fooForm.$invalid" />
    </form>
  </div>
</div>

＆＃13;

即使填写了表单有效性，ng-disabled也不会更新

2 个答案: