Angular 1.2 Broadcasting Änderungen in der Validierung über Richtlinien

Question

Wie verwende ich $ Broadcast, um benutzerdefinierte Validierung in anderen Direktiven zu aktualisieren, die bereits isolierten Bereich haben?

Ich möchte in der Lage sein, separate Validierungsregeln für ein einzelnes Eingabefeld zu erstellen. In Zukunft kann ich die Validierung eines Feldes ändern, indem ich einfach den Direktivenverweis ändere.

Check the plunkr

edit: Ich bin mit Winkel 1.2.8 Das Element der Richtlinie über ist hat Umfang isoliert.

Validation Richtlinie 1

(function() { 
     'use strict'; 

     angular 
      .module('app') 
      .directive('dateOneValidation', dateOneValidation); 

     function dateOneValidation() { 

      var directive = { 
       require: 'ngModel', // note: this has to stay 
       restrict: 'A', 
       link: link 
      }; 

      return directive; 

      function link(scope, element, attrs, ctrl) { 



     scope.$on('updateDateOneValidation', function(e, date){ 

       ctrl.$parsers.unshift(function (viewValue) { 
        var form = scope.form; 
        var dateOne = moment(form.dateOne.$viewValue, "DD/MM/YYYY", true); 
        var today = moment(); 

        var dateOneBeforeOrOnToday = dateOne.isSame(today, 'day') || dateOne.isBefore(today, 'day'); 

        dateOneBeforeOrOnToday ? form.dateOne.$setValidity('dateOneBeforeOrOnToday', true):        
              form.dateOne.$setValidity('dateOneBeforeOrOnToday', false); 
        return viewValue 
      }); 

     }); 
     } 
    } 
})(); 

Validation Richtlinie 2

(function() { 
     'use strict'; 

     angular 
      .module('app') 
      .directive('dateTwoValidation', dateTwoValidation); 

     function dateTwoValidation() { 

      var directive = { 
       require: 'ngModel', // note: this has to stay 
       restrict: 'A', 
       link: link 
      }; 

      return directive; 

      function link(scope, element, attrs, ctrl) { 

      scope.$on('updateDateTwoValidation', function(e, date){ 

        ctrl.$parsers.unshift(function (viewValue) { 

         var form = scope.form; 
         var dateOne = moment(form.dateOne.$viewValue, "DD/MM/YYYY", true); 
         var dateTwo = moment(viewValue, "DD/MM/YYYY", true); 

         var dateTwoAfterDateOne = dateTwo.isSame(dateOne, 'day') || dateTwo.isAfter(dateOne, 'day'); 

         dateTwoAfterDateOne ? form.dateTwo.$setValidity('dateTwoAfterDateOne', true):        
              form.dateTwo.$setValidity('dateTwoAfterDateOne', false); 
         return viewValue 
       }); 

      }); 
      } 
     } 
    })(); 

Answer 1

(function() { 

    'use strict'; 

    angular 
     .module('app') 
     .directive('stepOne', stepOne); 

    function stepOne() { 


     parentController.$inject = ['$scope']; 

     function parentController($scope) { 

      var vm = this; 

      vm.dateOne = '01/01/2000' 
      vm.dateTwo = '01/01/1900' 
      vm.validateStepOne = validateStepOne; 

      function validateStepOne() { 

       $scope.$broadcast('updateDateOneValidation'); 
       $scope.$broadcast('updateDateTwoValidation'); 
      } 
     } 

     var directive = { 
      restrict: 'EA', 
      require: '^form', 
      templateUrl: 'src/app/form/step1.html', 
      scope: { 
      }, 
      controller: parentController, 
      controllerAs: 'vm' 
     }; 

     return directive; 

    } 
})(); 

(function() { 
    'use strict'; 

    angular 
     .module('app') 
     .directive('dateOneValidation', dateOneValidation); 

    function dateOneValidation() { 

     var directive = { 
      require: 'ngModel', // note: this has to stay 
      restrict: 'A', 
      link: link 
     }; 

     return directive; 

     function link(scope, element, attrs, ctrl) { 

      var form = scope.form; 
      var today = moment(); 

      scope.$watch(attrs.ngModel, function() { 
       validator() 
      }); 

      scope.$on('updateDateOneValidation', function() { 
       validator(); 
      }); 

      function validator() { 
       var dateOne = moment(form.dateOne.$viewValue, "DD/MM/YYYY", true); 
       var dateOneBeforeOrOnToday = dateOne.isSame(today, 'day') || dateOne.isBefore(today, 'day'); 

       dateOneBeforeOrOnToday ? form.dateOne.$setValidity('dateOneBeforeOrOnToday', true) : 
        form.dateOne.$setValidity('dateOneBeforeOrOnToday', false); 
      } 
     } 
    } 
})(); 

(function() { 
    'use strict'; 

    angular 
     .module('app') 
     .directive('dateTwoValidation', dateTwoValidation); 

    function dateTwoValidation() { 

     var directive = { 
      require: 'ngModel', // note: this has to stay 
      restrict: 'A', 
      link: link 
     }; 

     return directive; 

     function link(scope, element, attrs, ctrl) { 

      var form = scope.form; 

      scope.$watch(attrs.ngModel, function() { 
       validator(); 
      }); 

      scope.$on('updateDateTwoValidation', function (e, date) { 
       validator(); 
      }); 

      function validator() { 

       var dateOne = moment(form.dateOne.$viewValue, "DD/MM/YYYY", true); 
       var dateTwo = moment(form.dateTwo.$viewValue, "DD/MM/YYYY", true); 

       var dateTwoAfterDateOne = dateTwo.isSame(dateOne, 'day') || dateTwo.isAfter(dateOne, 'day'); 

       dateTwoAfterDateOne ? form.dateTwo.$setValidity('dateTwoAfterDateOne', true) : 
        form.dateTwo.$setValidity('dateTwoAfterDateOne', false); 

      }; 
     }; 
    } 
})() 

Answer 2

Alternativ können Sie einen höheren freigegebenen Bereich mit einem Formular-Objekt verwenden, und übergeben es an Ihre Richtlinien. Etwas wie das Folgende:

topLevelScope - ngForm 
    directive1(topLevelScope.ngForm) 
     topLevelScope.ngForm.$setValidity('input1', true) 
    directive2(topLevelScope.ngForm) 
     topLevelScope.ngForm.$setValidity('input2', true) 
    directive3(topLevelScope.ngForm) 
     topLevelScope.ngForm.$setValidity('input3', true) 

Meine 2 Cent.