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

我正在使用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
    };
};

我想让控制器保持干燥,因此我定义了一个工厂,如下所示:

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;

但是我意识到我可以将它们添加到模块的run方法中的$ 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. 有没有更好的方法来达到相同的结果?

更新的解决方案

我选择使用自定义指令,而不是向带有臭味的$ 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);
                });
            }
        };
    });

现在也不需要验证工厂。

山姆·巴纳姆

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

$rootScope 未在控制器中定义

来自分类Dev

在动态加载的内容上应用 angularjs 控制器功能

来自分类Dev

定义控制器-angularjs

来自分类Dev

如何访问Angularjs控制器中其他文件(不是控制器)中定义的功能?

来自分类Dev

如何访问Angularjs控制器中其他文件(不是控制器)中定义的功能?

来自分类Dev

如何使AngularJS控制器依赖于通过Ajax在rootScope上加载的值?

来自分类Dev

控制器未定义AngularJS

来自分类Dev

AngularJS控制器定义语法的基础

来自分类Dev

AngularJS:无法定义控制器

来自分类Dev

定义AngularJS控制器参数

来自分类Dev

需要从控制器的ng-init函数调用获取模板以获取Angularjs中的自定义指令

来自分类Dev

如何从AngularJS控制器解析模块中定义的另一个控制器功能(动态ng-controller)?

来自分类Dev

AngularJS通用控制器

来自分类Dev

CakePHP控制器自定义功能无法识别

来自分类Dev

角度控制器功能未定义

来自分类Dev

自定义MVC帮助程序扩展控制器和操作上的“转到声明”功能

来自分类Dev

AngularJS:使用Jasmine与控制器测试指令时控制器未定义

来自分类Dev

在同一控制器上混合SATA和SAS驱动器

来自分类Dev

尝试使用Angular rootScope在控制器之间持久保存数据,但始终未定义

来自分类Dev

使用控制器作为语法定义和访问$ rootScope

来自分类Dev

AngularJS UI-Router无法识别模块上定义的控制器

来自分类Dev

AngularJS控制器到底是如何定义的?

来自分类Dev

找不到AngularJS控制器,未定义

来自分类Dev

AngularJS 1.3.0 + TypeScript控制器定义问题

来自分类Dev

如何在多个文件中定义控制器-AngularJs

来自分类Dev

如何检查是否已定义angularjs控制器

来自分类Dev

AngularJS-未定义的控制器

来自分类Dev

AngularJS控制器显示未定义?

来自分类Dev

定义AngularJS控制器时使用数组符号的原因

Related 相关文章

  1. 1

    $rootScope 未在控制器中定义

  2. 2

    在动态加载的内容上应用 angularjs 控制器功能

  3. 3

    定义控制器-angularjs

  4. 4

    如何访问Angularjs控制器中其他文件(不是控制器)中定义的功能?

  5. 5

    如何访问Angularjs控制器中其他文件(不是控制器)中定义的功能?

  6. 6

    如何使AngularJS控制器依赖于通过Ajax在rootScope上加载的值?

  7. 7

    控制器未定义AngularJS

  8. 8

    AngularJS控制器定义语法的基础

  9. 9

    AngularJS:无法定义控制器

  10. 10

    定义AngularJS控制器参数

  11. 11

    需要从控制器的ng-init函数调用获取模板以获取Angularjs中的自定义指令

  12. 12

    如何从AngularJS控制器解析模块中定义的另一个控制器功能(动态ng-controller)?

  13. 13

    AngularJS通用控制器

  14. 14

    CakePHP控制器自定义功能无法识别

  15. 15

    角度控制器功能未定义

  16. 16

    自定义MVC帮助程序扩展控制器和操作上的“转到声明”功能

  17. 17

    AngularJS:使用Jasmine与控制器测试指令时控制器未定义

  18. 18

    在同一控制器上混合SATA和SAS驱动器

  19. 19

    尝试使用Angular rootScope在控制器之间持久保存数据,但始终未定义

  20. 20

    使用控制器作为语法定义和访问$ rootScope

  21. 21

    AngularJS UI-Router无法识别模块上定义的控制器

  22. 22

    AngularJS控制器到底是如何定义的?

  23. 23

    找不到AngularJS控制器,未定义

  24. 24

    AngularJS 1.3.0 + TypeScript控制器定义问题

  25. 25

    如何在多个文件中定义控制器-AngularJs

  26. 26

    如何检查是否已定义angularjs控制器

  27. 27

    AngularJS-未定义的控制器

  28. 28

    AngularJS控制器显示未定义?

  29. 29

    定义AngularJS控制器时使用数组符号的原因

热门标签

归档