Herhangi bir alt öğe

belirli bir sınıfa sahipse, sınıfı bir uygulamam var. Birkaç bölümden oluşan bir formum var ve herhangi bir alanın belirli bir sınıfa sahip olması durumunda bölüme bir sınıf uygulamak istiyorum.Herhangi bir alt öğe

Fikrim, bölüm içinde has-error sınıfıyla herhangi bir alanı izlemek ve bölüm başlığında bir simge veya bir şey görüntülemek oldu.

Her alan sınıfını ng-class="{'has-error': !value, 'has-success': value}" ile ayarlar ve sınıfın güncelleştirildiği sıraya benziyor ve $watch olay yangınları sorunlara neden oluyor.

Ben burada plunkr kurulum var: https://plnkr.co/edit/1isq3DXXUvSPW5ChYkuM?p=preview

deneyin silme ve giriş değer girerek ve üst sınıf "senkronize" olmadığını göreceksiniz.

Html:

<head> 
    <link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
    <link data-require="[email protected]" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" /> 
    <script data-require="[email protected]" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <script data-require="[email protected]" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> 
    <script data-require="[email protected]" data-semver="3.3.6" src="bootstrap-js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body ng-app="app"> 
    <sws-form-section> 
     <sws-form-field label="Test"></sws-form-field> 
    </sws-form-section> 
    </body> 

</html>

JavaScript: Daniel Becks öneri gereğince

var module = angular.module('app', []); 

module.directive('swsFormSection', function() { 
    return { 
     link: function($scope, element) { 
     $scope.$watch(function() { 
      var errors = element.find('.has-error').length; 
      console.log('outer:' + errors); 
      return errors; 
     }, function(value) { 
      $scope.hasAnyErrors = value; 
     }); 
     }, 
     transclude: true, 
     template: '<div><label ng-class="{\'text-danger\': hasAnyErrors, \'text-success\': !hasAnyErrors}">Errors In Section: {{hasAnyErrors}}</label><div ng-transclude></div>' 
    }; 
    }); 

module.directive('swsFormField', function() { 
    return { 
    link: function($scope, element) { 
     $scope.value = 'testar'; 

     $scope.$watch(function() { 
      var errors = element.find('.has-error').length; 
      console.log('inner:' + errors); 
      return errors; 
     }, function(value) { 
      console.log('the value:' + $scope.value); 
     }); 
    }, 
    template: '<div class="form-group" ng-class="{ \'has-error\': !value, \'has-success\': value }"><label class="control-label">Test</label><input type="text" class="form-control" ng-model="value"></div><pre>{{value|json}}</pre>' 
    } 
});

kaynak

2016-03-31 Martin Persson

Eğer 'ng-validate' kullanmadığınız bir nedeni var mı? Daha sonra sadece bir sınıfa bakmak zorunda kalmak yerine formda $ $ geçerli olduğunu kontrol edebilirsiniz ... –

Ah, kesinlikle buna dikkat etmeliyim. Ama form başına birkaç bölüm var, bu yüzden nasıl gideceğimi bilmiyorum. –

Ve ben hala böyle bir çözüme –

: "bunu yapmayız"

cevabım olurdu Genel olarak, veri modelini gözlemleyerek, DOM'ı gözlemleyerek değil, Açısal olarak 'dan daha iyi olursunuz.

Zaten mevcut ng-geçerli sınıfları kullanmak için gidin ve her bölüm ayrı bir formu olarak var kapsamına formu yayımlamak ve formu kullanabilirsiniz. Bölüm başlığında geçerli özelliği, $ seçti.

var module = angular.module('app', []); 

module.directive('swsFormSection', function() { 
    return { 
     transclude: true, 
     template: '<form name="formSection"><i class="fa" ng-class="{ \'fa-check\': formSection.$valid, \'fa-pencil\': formSection.$invalid }"></i> My Section:<div ng-transclude></form>' 
    }; 
    }); 

module.directive('swsFormField', function() { 
    return { 
    template: '<div class="form-group"><label class="control-label">Test</label><input type="text" required class="form-control" ng-model="value"></div><pre>{{value|json}}</pre>' 
    } 
});

Güncelleme plunkr: https://plnkr.co/edit/1isq3DXXUvSPW5ChYkuM?p=preview

kaynak

2016-03-31 14:06:07

Herhangi bir alt öğe

cevap

İlgili konular