Question

我们有一个指令（比如检查按钮），它创建一个带有某些特定功能的样式化复选框。

我在指令中需要ng-form，所以我可以在指令中使用formCtrl，并且我成功地将表单设置为$ dirty或$ valid。 我的问题是如何将指令创建的特定元素设置为$ valid或$ dirty，并且通常表现为角形式元素。只是做element.$valid = false不能正常工作fromCtrl.addControl(element)所以我被困住了。我应该强调这个指令在ng-repeat循环中使用，所以我可以在其上设置一个“名称”，因为ng-repeat可以设置一个名称（必须是一个字符串）

这是（simplfied）模板：

<div class="check-button ">
    <div c" ng-class="{ 'active': value != undefined ? btnState == value : btnState }">
        <i class="icon-ok"></i>
    </div>
    <div class="pull-left btn-label" ng-transclude></div>
</div>

这是代码：

angular.module('our.directives').directive('checkButton', [function() {
    return {
        restrict: 'A',
        require:'?^form', //may be used outside a form
        templateUrl: '/tempalte/path/tpocheckbutton.html',
        scope: {
            btnState: '=ngModel',
            value: '=radioBtn'
        },
        replace: true,
        transclude: true,
        link: function($scope, $element, $attrs, formCtrl) {
            if(formCtrl){

                formCtrl.$addControl($element)//doesn't work
            }

            $scope.$watch(function() {
                return $scope.btnState;
            }, function(newValue) {
                $scope.btnState = newValue;
            });

            var _onElementClick = function() {
                if($scope.value != undefined) {
                    $scope.btnState = $scope.value;
                } else {
                    $scope.btnState = !$scope.btnState;
                }
                if(formCtrl){
//                    $element.$dirty = true;//doesn't work
                    formCtrl.$setDirty(); //does set the form as dirty - but not the field
                }

            };

            $element.find('.button, .btn-label').on('click', _onElementClick);
        }
    };
}]);

我们正在使用最新的角度版本（1.2.10）

Answer 1

您基本上需要同时form和ngModel，因为form.$addControl需要ngModelController。

Angular表单：在自定义指令上设置$ dirty属性

1 个答案: