角度1.2ブロードキャストによるディレクティブ間のバリデーションの変更

Question

すでにスコープが分離されている他のディレクティブで$ broadcastを使用してカスタム検証を更新するにはどうすればよいですか？

私は、1つの入力フィールドで別々の検証ルールを作成したいと思っています。将来、指示参照を変更するだけで、フィールドの検証を変更できます。

Check the plunkr

編集：私は、ディレクティブはスコープを隔離している上にある角度1.2.8 要素を使用しています。

検証指令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 
      }); 

     }); 
     } 
    } 
})(); 

検証指令は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

またあなたは、フォームオブジェクトで高い共有スコープを使用して、ディレクティブにそれを渡すことができます。次のようなもの：

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) 

2セント。