我正在使用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>
我的问题是:
>我应该避免在$rootScope中添加常用功能吗?如果是这样,有什么陷阱?
>仅在必要时混合使用常见功能更好吗?
>有没有更好的方法来实现相同的结果?
更新方案
我选择使用自定义指令而不是向$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',formController) { scope.$watch(function () { return formController.$dirty && formController.$valid; },function (value) { element.prop('disabled',!value); }); } }; });
现在也不需要验证工厂.
你是如何使用这个validationFactory的?是否要更改提交按钮的外观?如果是这样,我建议为按钮本身创建自定义组件,并让组件引用validationFactory.