2015-05-23 34 views
6

'dan birden çok girdinin geçerliliğini ayarlayın Bir denetimin değerinden biri değiştirildiğinde, bir gruptaki birden çok giriş denetiminin doğrulama durumunu sıfırlamak için kullanılabilecek bir yönerge oluşturmaya çalışıyorum. Gruplar, HTML'de belirlenen yönerge özniteliği ile tanımlanır. Ör: - girdileri Tanışmak tarihi itibaren ve Her iki kontrolleri giriş değerinin bir kullanıcı tarafından değiştirildiğinde geçerlilik durumunu sıfırlarAngularJS Yönergesi

Bu defa

JS ne var/Eğik

angular.module('myModule').directive('groupedInputs', function() { 
    return { 
     restrict: 'A', 
     require: '?ngModel', 
     link: function (scope, element, attrs, ctrl) { 
      element.on('change', function() { 

       // Resetting own validity 
       scope.$apply(ctrl.$setValidity('server', true)); 

       // Here I need to set the validity of the controls which 
       // have the `GroupedInputs` directive with the 
       // same attribute value 
      }); 
     } 
    }; 
}); 

HTML

<input name="FromDate" type="date" class="form-control" ng-model="model.FromDate" grouped-inputs="FromToDates"> 
<input name="ToDate" type="date" class="form-control" ng-model="model.ToDate" grouped-inputs="FromToDates"> 

Kendi giriş kontrolünün geçerliliğini sıfırlayabilir, ancak direktif ve aynı özellik değeriyle diğer giriş kontrollerine erişemez. Girişleri aynı öznitelikle sorgulayarak diğer denetimlere erişmek için mümkün olan en iyi açı yolu nedir?

cevap

5

Grup öğelerini denetleyicileri gruba eklemek ve gruptaki tüm öğelerinValiteyi ayarlamak için yöntemlerle depolamak için yardımcı nesne uygulayarak bu soruna yaklaşmaya çalışırdım. Böyle

şey:

angular.module('myModule').directive('groupedInputs', function() { 

    var groupControls = { 
     groups: {}, 
     add: function(name, ctrl) { 
      this.groups[name] = this.groups[name] || []; 
      this.groups[name].push(ctrl); 
     }, 
     setValidity: function(name, key, value) { 
      this.groups[name].forEach(function(ctrl) { 
       ctrl.$setValidity(key, value); 
      }); 
     } 
    }; 

    return { 
     restrict: 'A', 
     require: '?ngModel', 
     link: function(scope, element, attrs, ctrl) { 

      // Add element controller to the group 
      groupControls.add(attrs.groupedInputs, ctrl); 

      element.on('change', function() { 

       // When needed, set validity of elements in the group 
       groupControls.setValidity(attrs.groupedInputs, 'server', false); 
       scope.$apply(); 

      }); 
     } 
    }; 
}); 

Demo:http://plnkr.co/edit/fusaaN6k9J5SZ7iQA97V?p=preview

1

Bir dizide aynı grubu bulunan tüm denetleyicileri depolayabilir:

angular.module('myModule').directive('groupedInputs', function() { 
    var controllersPerGroup = {}; 

    return { 
     restrict: 'A', 
     require: '?ngModel', 
     link: function (scope, element, attrs, ctrl) { 
      var groupName = attrs.groupedInputs; 
      var group = controllersPerGroup[groupName]; 
      if (!group) { 
       group = []; 
       controllersPerGroup[groupName] = group; 
      } 
      group.push(ctrl); 

      element.on('change', function() { 

       // Resetting own validity 
       scope.$apply(ctrl.$setValidity('server', true)); 

       // all the other controllers of the same group are in the groups array. 
      }); 
     } 
    }; 
}); 

eleman $destroy etkinliğini dinleyerek, tahrip edildiğinde denetleyicileri kaldırarak bakmak unutmayın.