AngularJS通用控制器功能 - 在需要的地方混合或在$ rootScope上定义?

时间:2013-10-15 12:26:37

标签: angularjs angularjs-controller

我正在使用AngularJS的v1.2.0 rc2,并想知道为多个控制器提供通用功能的最佳方法是什么。

我想在所有编辑模型的控制器中使用以下验证功能:

$scope.canSave = function (formController) {
    return formController.$dirty && formController.$valid;
};

$scope.validationClasses = function (modelController) {
    return {
        'has-error': modelController.$invalid && modelController.$dirty,
        'has-success': modelController.$valid && modelController.$dirty
    };
};

我想让我的控制器保持DRY,所以我按如下方式定义了一个工厂:

angular.module('myModule', [])
    .factory('validationFactory', [function () {
        return {
            validationClasses: function (modelController) {
                return {
                    'has-error': modelController.$invalid && modelController.$dirty,
                    'has-success': modelController.$valid && modelController.$dirty
                };
            },
            isFormValid: function (formController) {
                return formController.$dirty && formController.$valid;
            }
        };
    }]);

最初,我只是将工厂混合到需要它的控制器中,如下所示:

$scope.canSave = validationFactory.isFormValid;

$scope.validationClasses = validationFactory.validationClasses;

但我意识到我可以将它们添加到模块运行方法中的$ rootScope中,如下所示:

angular.module('myModule', [])
    .run([
        '$rootScope',
        'validationFactory',
        function ($rootScope, validationFactory) {
            $rootScope.canSave = $rootScope.canUpdate = validationFactory.isFormValid;
            $rootScope.validationClasses = validationFactory.validationClasses;
        }]);

现在,每个控制器都可以随意使用它们,并且可以减少布线。

这些功能在视图模板中使用如下:

<form name="questionForm" novalidate>
    <div class="form-group" ng-class="validationClasses(questionForm.question)">
        <label for="questionText" class="control-label">Text</label>
        <input type="text" ng-model="question.text" name="question"
               id="questionText" class="form-control" required/>
        <span ng-show="questionForm.question.$error.required"
              class="help-block">Question text is required</span>
    </div>
    ...
    <div class="form-group" ng-switch on="action">
        <button type="button" ng-switch-when="New" ng-click="save()" 
                ng-disabled="!canSave(questionForm)" 
                class="btn btn-primary">Save</button>
        <button type="button" ng-switch-default ng-click="update()" 
                ng-disabled="!canUpdate(questionForm)" 
                class="btn btn-primary">Update</button>
        <button type="button" ng-click="cancel()"
                class="btn btn-default">Cancel</button>
    </div>
</form>

我的问题是:

  1. 我应该避免在$ rootScope中添加常用功能吗?若然,有什么陷阱?
  2. 最好只在必要时混合常用功能吗?
  3. 有更好的方法可以达到同样的效果吗?
  4. 更新了解决方案

    我选择使用自定义指令,而不是向$ rootScope添加函数,因为它有一种令人讨厌的气味。

    我创建了自定义属性validation-class-for="<input.name>"disabled-when-invalid,因此标记如下所示:

    <div class="form-group" validation-class-for="question">
        <label for="questionText" class="control-label">Text</label>
        <input type="text" ng-model="question.text" name="question"
               id="questionText" class="form-control" required/>
        <span ng-show="questionForm.question.$error.required"
              class="help-block">Question text is required</span>
    </div>
    
    <button type="button" ng-click="save()" disabled-when-invalid 
        class="btn btn-primary">Save</button>
    

    指令只需要一个表单祖先并观察一个函数来确定状态。

    angular.module('myModule', [])
        .directive('validationClassFor', function () {
            return {
                require: '^form',
                link: function (scope, element, attributes, formController) {
                    scope.$watch(function () {
                        var field = formController[attributes.validationClassFor];
                        if (field.$invalid && field.$dirty) {
                            element.removeClass('has-success').addClass('has-error');
                        } else if (field.$valid && field.$dirty) {
                            element.removeClass('has-error').addClass('has-success');
                        } else {
                            element.removeClass('has-error').removeClass('has-success');
                        }
                    });
                }
            };
        })
        .directive('disabledWhenInvalid', function () {
            return {
                require: '^form',
                link: function (scope, element, attributes, formController) {
                    scope.$watch(function () {
                        return formController.$dirty && formController.$valid;
                    }, function (value) {
                        element.prop('disabled', !value);
                    });
                }
            };
        });
    

    现在也不需要验证工厂。

2 个答案:

答案 0 :(得分:2)

我不建议使用范围来共享逻辑。这会降低可重用性,并在您想要测试它时产生影响。

  • 我建议采用以下方法之一: 您可以使用类扩展名:http://ejohn.org/blog/simple-javascript-inheritance/来提取通用逻辑。
  • 您可以使用角度消息来广播切换状态的事件,例如来自验证侦听器的“有效”。
  • 您可以使用拦截器根据某些条件阻止后端请求。

答案 1 :(得分:1)

你是如何使用这个validationFactory的?是否要更改提交按钮的外观?如果是这样,我建议为按钮本身创建自定义组件,并让组件引用validationFactory。