Использовать ui-validate внутри шаблона директивы

Можно ли использовать ui-validate внутри шаблона директивы, как пример 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>

1 ответ

Решение

Сандер Элиас:

ngModel очень мощная, но в то же время очень требовательная. Из-за transclude и изолированной области видимости ngModel не регистрируется в форме. но для ui-validate достаточно получить сам ng-контроллер.

Чтобы решить в основном просто удалить из директивы:

require : 'ngModel'

и сделать:

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

Полное обсуждение можно увидеть по адресу:

https://groups.google.com/forum/

Другие вопросы по тегам