Question

可以在指令模板中使用ui-validate，例如plunker示例吗？

Plunker：http://plnkr.co/edit/H6v6nVobIM3EKmAVHZHa?p=preview

template.html

<div class="form-group" ng-class="{'has-error' : !isValid()}">
  <label for="{{name}}" class="control-label">{{label}}</label>
  <div class="input-group">
    <span class="input-group-addon">US$</span>
    <input type="number" 
      ng-model="ngModel" 
      ng-required="isRequired" 
      ui-validate="'$value > 0'" 
      class="form-control" 
      name="{{name}}" 
      id="{{name}}" 
    />
  </div>
</div>

的script.js

.directive('currency', function() {
  return {
    restrict    : 'E',
    replace     : true,
    transclude  : true,
    require     : 'ngModel',
    scope       : { ngModel: '=' },
    templateUrl : 'template.html',
    link        : function(scope, elm, attr, ctrl) {

      scope.name = (attr.name || 'undefinedName');
      scope.label = (attr.label || 'undefinedLabel');
      scope.isRequired = (attr.required !== undefined);

      scope.isValid = function() {
        return ctrl.$valid;
      };
    }
  };
});

用法：

<currency ng-model="foo.value" name="value" label="Value:" required></currency>

Answer 1

Sander Elias：

ngModel非常强大，但它对周围的环境也非常挑剔。由于transclude和隔离范围，ngModel不会在表单中注册自己。但是对于ui-validate，它足以让ng-controller本身。

基本上只需从指令中删除：

require : 'ngModel'

并制作：

var ctrl = elm.find('input').data('$ngModelController');

完整的讨论可以在以下网址看到：

https://groups.google.com/forum/#!topic/angular/cMgxWTM-j00

在指令模板中使用ui-validate

1 个答案: