AngularJS의 모든 구성 요소에서 데이터를 수집하는 방법

Question

각 구성 요소는 대부분 독립형이며 전역 범위를 오염시키지 않습니다. 그러나, 나는 응용 프로그램의 모든 데이터를 수집하고 그것을 저장하고 싶습니다.

이 문제에 대한 일반적인 접근 방법이 있습니까?

Answer 1

지금은이 방법을 사용하고 있습니다 :

• 부모 구성 요소가
• 각 하위 구성 요소가 매개 변수로 그 모델을 전달 하위 구성 요소의 모델에 대한 참조를 보유/
• 하위 구성 요소를 바인딩 사이의 구별에있다 도메인 모델 및 자체 상태 특성

이 기술은 약간의 오버 헤드를 유발하지만 제대로 작동하는 것처럼 보입니다. 구성 요소가 사용하고자하는 도메인 모델과 다른 속성 사이의 차이점은 좋은 관심의 분리를 허용합니다.

// parent template 

<div class="message-list"> 
    <message ng-repeat="message in $ctrl.messages" model="message" 
      on-delete="$ctrl.removeMessage(message)"> 
    </message> 
</div> 

---

// parent component 

.component('messagelist', { 
    templateUrl: 'core/messagelist/messagelist.html', 
    controller: MessageListCtrl 
}); 

function MessageListCtrl() { 
    var message1 = { 
     text: "message numero uno" 
    }; 
    var message2 = { 
     text: "message numero dos" 
    }; 
    this.messages = [message1, message2]; 

    // (...) 
} 

---

// child template 

<input type="text" ng-model="$ctrl.model.id" /> 
<textarea ng-model="$ctrl.model.text"></textarea> 

---

// child component 

.component('message', { 
    templateUrl: 'core/message/message.html', 
    controller: MessageCtrl, 
    bindings: { 
     model: "=", 
     onDelete: "&" 
    } 
}) 

function defaultValue(current, defaultVal) { 
    return typeof current !== "undefined" ? current : defaultVal; 
} 

function MessageCtrl() { 
    this.$onInit = function() { 
     this.model.id = defaultValue(this.model.id, ""); 
     this.model.text = defaultValue(this.model.text, ""); 
    } 
} 

:

코드에서이 같이 보입니다