angularjs - 在指令模板中使用 ui-validate

Question

可以在像 plunker 示例这样的指令模板中使用 ui-validate 吗？

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

模板.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>

脚本.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

By Sander Elias:

ngModel is very powerful, but it's also very picky on its surroundings. Due to the transclude and the isolate scope, ngModel does not register itself in the form. but for ui-validate, it is enough to get the ng-controller itself.

To resolve basically just remove from directive the:

require : 'ngModel'

and make:

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

A complete discussion can be seen at:

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