AngularJS ortak denetleyici işlevi - gerektiğinde karıştırın veya $ rootScope üzerinde tanımlayın?

Question

AngularJS v1.2.0 rc2 kullanıyorum ve birden çok denetleyiciye genel işlevsellik sağlamak için en iyi yöntem nedir bilmek istiyorum.

Ben bir model düzenleme tüm denetleyicileri kullanmak istediğiniz aşağıdaki doğrulama işlevi vardır:

$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 
    }; 
}; 

benim denetleyicileri tutmak istiyorum aşağıdaki gibi bu yüzden bir fabrika tanımlanan kuru:

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; 
      } 
     }; 
    }]); 

aşağıdaki gibi

Başlangıçta, sadece gerekli denetleyicileri içine fabrika karışık:

$scope.canSave = validationFactory.isFormValid; 

$scope.validationClasses = validationFactory.validationClasses; 

Ama şöyle ben modülün çalışma yönteminde $ rootScope eklemek fark etti:

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

Şimdi gelişigüzel her denetleyicisi mevcuttur ve yapılacak kadar az kablolama yoktur.

<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> 

Benim sorulara

şunlardır:

1. Ben $ rootScope ortak fonksiyonlar ekleyerek kaçınmalısınız şöyle

   fonksiyonları görünüm şablonlar kullanılır? eğer öyleyse, tuzaklar nelerdir?

2. Ortak işlevselliği yalnızca gerektiğinde karıştırmak daha mı iyidir?
3. Aynı sonucu elde etmenin daha iyi bir yolu var mı?

   Çözüm Güncelleme

bu konuda bir pis kokusu vardı $ rootScope işlevleri eklemek yerine, özel direktiflerini kullanmayı tercih etti.

<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> 

direktifleri sadece form atası gerektiren ve durumunu belirlemek için bir işlev izle:

Ben özel validation-class-for="<input.name>" nitelikleri ve disabled-when-invalid böylece biçimlendirme şöyle yarattı. Düzeltme fabrikasına gerek yoktur.

Answer 1

Bu validationFactory programını nasıl kullanıyorsunuz? Gönderme düğmelerinin görünümünü değiştirmek mi? Öyleyse, düğmelerin kendileri için özel bileşenler oluşturmanızı ve bileşen referansını validationFactory uygulamasına sahip olmayı öneririm.

Answer 2

Paylaşım mantığının kapsamını kullanmayı önermem. Bu, tekrar kullanılabilirliği azaltır ve test etmek istediğinizde etkisi vardır.

• ben aşağıdaki yaklaşımlardan birini öneririm: Ortak mantığı ayıklamak için http://ejohn.org/blog/simple-javascript-inheritance/: Sen sınıf uzantısını kullanabilirsiniz.
• Bir geçerlilik denetleyicisinden "geçerli" gibi, durumu değiştiren yayın olaylarına açısal mesajlaşma özelliğini kullanabilirsiniz.
• Bazı koşullara göre arka uç isteklerini önlemek için bir önleme kullanabilirsiniz.