Question

如何使用$ broadcast更新已经具有隔离范围的其他指令中的自定义验证？

我希望能够在单个输入字段上创建单独的验证规则。因此，将来我只需更改指令引用即可更改字段的验证。

编辑：我正在使用角度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美分。

Angular 1.2广播在指令的验证中发生了变化

2 个答案: