지시어를 너무 많은 논리로 잘못 사용하고 있습니까?

Question

factory의 객체 목록을 얻고 controller에 전달하고 거기에서 directive으로 렌더링한다고 가정 해 봅시다. 지금까지 가장 좋은 방법은 무엇입니까?

.directive('Foo', function($modal) { 
    return { 
     restrict: 'EA', 
     require: 'ngModel', 
     transclude: true, 
     templateUrl: 'admin/foo.html', 
     scope: { 
      model: '=ngModel', 
      save: '&' 
     }, 
     controller: function($scope) { 
      $scope.$watch('model', function(newVal, oldVal) { 
       init() 
      }); 
      function init(){ 
       // do some loops 
      }; 
      $scope.doThis(){ 
      // click event 
      } 
      $scope.checkThat(){ 
      // some array methods 
      } 
      $scope.proxySave(){ 
      // call passed in fn(); 
      $scope.save({}) 
      } 
     }, 
     link: function(scope, element, attr, ngModel) { 
      // not really doing much here 
     } 

그리고 지시어 HTML에서

이 doThis() 같이 정의 일부 NG 클릭 기능이 될 것 : 내 지시어처럼 보이는 경우에도 각 개체를 가정

는

하는 save() 기능이 있습니다.

분리 된 관심사 관점에서 볼 때 주 컨트롤러에서 물건을 유지할 수 있다고 생각하지만, HTML의 템플릿과 로직 전체에 연결하는 것 외에 내 지시문 코드 내에서 DOM 조작을 많이 수행하지는 않습니다. 지시기 컨트롤러. 일부 지시선 컨트롤러는 약 100 줄의 로직입니다.

내가 표시/숨기기를 남용하고 있기 때문에 그게 맞습니까? 대신 링크 기능을 사용해야합니까?

Answer 1

아마도 "올바른 해결책"을 제공하는 것보다 의견을 표현하는 것이 더 나은 질문 일 수 있습니다.

지시문이 다른 지시문 (require: "^myDirective")에서 사용할 수있는 논리를 노출하지 않으면 개인적으로 지시문에 제어기를 도입하지 않습니다. 따라서 대부분의 지시문에는 컨트롤러에 넣은 코드가 있습니다 (link: function (scope, element, attrs) {}).

DOM 조작과 관련이없는 많은 코드 행이있는 경우 서비스로 이동할 수있는 UI와 관련없는 비즈니스 로직이 포함되어있을 가능성이 큽니다. 재사용 가능성이 높아지고 우려가 더 명확 해집니다.

TL; DR 당신이 컨트롤러를 추가, 다른 지침 일부 API를 노출 컨트롤러를 필요로하는 경우 모든 $scope.foo = function() { ... }이 link: function (...) {...}뿐만 아니라

살 수

• : this.bar = function()
• 많이 넣어 로직을 가능한 한 서비스에 통합하십시오. 이미 말했듯 또는

(이 종종 AngularJS와 응용 프로그램에서 볼 수 있지만, 나는 그것이 OK 생각하지 않음) 모델에 논리를 추가 : 그냥 제 생각입니다 ...

편집 :을 무엇 제 말은 "당신의 모델에 논리를 추가"하는 것입니까?

자바 스크립트는 함수형 프로그래밍 언어 일뿐만 아니라 객체 지향형으로도 사용할 수 있습니다. 물론 "클래스"는 없지만 protoypal 상속이나 getter 및 setter와 같은 ECMAScript 5 기능을 사용하면 Java 또는 다른 OOP 언어처럼 보이고 동작하는 객체 모델을 만들 수 있습니다.

컨트롤러, 서비스, 필터 또는 지시문에 사용할 수있는 매우 작은 비즈니스 논리 "조각"이 종종 있습니다. 거대한 그래프에 객체를 연결하지 않고 모든 로직 (예 : 지속성 로직)을 비즈니스 객체에 넣을 것입니다. 그러나 이러한 작은 로직 스 니펫은 모델 데이터에 가장 잘 위치합니다.:

isExternal() 
grossPrice 
calculateFields() 
roundToMinutes() 

이렇게하면 이런 종류의 로직이 항상 "원시"데이터와 함께 존재하고 코드를 복제 할 위험이 적습니다. 그리고 필자는 데이터를 항상 올바른 서비스에 연결하여 해당 서비스가 컨트롤러 또는 지시문에 표시되도록 할 필요가 없습니다.

답변 "표시/숨기기를 남용하고 있습니까?"

복잡한 UI는 응용 프로그램 및 해당 데이터의 상태에 따라 많이 표시하거나 숨길 수 있습니다. 따라서 실제 응용 프로그램 (작은 예제뿐만 아니라)에는 꽤 많은 수의 ng-if과 ng-show/ng-hide 또는 ng-switch이 있습니다. 항상 좋은 것처럼 보이지는 않지만 대안은 무엇입니까? (ng-if-start 및 ng-if-end을 사용하는 경우 ng-if을 두 번 저장할 수 있습니다 (Multi-Element Directives 참조).