지시문은 짧고 (코드 단위), (잠재적으로) 재사용 가능하고 기능 측면에서 범위가 제한된 경우에 가장 좋습니다 (엄지 손가락으로). UI를 포함하고 서비스 (백엔드에 대한 연결을 처리한다고 가정)에 따라 지시문을 작성하면 두 가지 기능적 역할, 즉
- 위젯에 대한 데이터 표시 / 입력을위한 UI 제어
- 서비스를 통해 백엔드에 제출
그러나 다른 서비스 또는 다른 UI (적어도 쉽게는 아님)에서 다시 사용할 수 없으므로 재사용 성이 떨어집니다.
이러한 결정을 할 때, 나는 종종 비교 내장 된 HTML 요소 : 예를 들어 <input>, <textarea>또는 <form>: 그들은 어떤 특정 백엔드 완전히 독립적입니다. HTML5는 <input>요소에 몇 가지 추가 유형을 제공했습니다. 예를 들어 date, 여전히 백엔드와 독립적이며 데이터의 정확한 위치 또는 사용 방법. 그것들은 순전히 인터페이스 요소입니다. 지시문을 사용하여 작성된 사용자 정의 위젯은 가능한 경우 동일한 패턴을 따라야한다고 생각합니다.
그러나 이것은 이야기의 끝이 아닙니다. 기본 제공 HTML 요소와의 유사성을 넘어서 서비스를 호출하는 재사용 가능한 지시문을 작성하고을 사용하는 것처럼 순수한 UI 지시문을 사용할 수 있습니다 <textarea>. 다음과 같이 일부 HTML을 사용한다고 가정하십시오.
<document document-url="'documents/3345.html'">
<document-data></document-data>
<comments></comments>
<comment-entry></comment-entry>
</document>
commentEntry지시문 을 코딩하기 위해 서비스를 UI 위젯과 연결하는 컨트롤러 만 포함하는 매우 작은 지시문을 만들 수 있습니다. 다음과 같은 것 :
app.directive('commentEntry', function (myService) {
return {
restrict: 'E',
template: '<comment-widget on-save="save(data)" on-cancel="cancel()"></comment-widget>',
require: '^document',
link: function (scope, iElement, iAttrs, documentController) {
// Allow the controller here to access the document controller
scope.documentController = documentController;
},
controller: function ($scope) {
$scope.save = function (data) {
// Assuming the document controller exposes a function "getUrl"
var url = $scope.documentController.getUrl();
myService.saveComments(url, data).then(function (result) {
// Do something
});
};
}
};
});
이것을 극단적으로 고려하면 ng-controllerHTML에 수동 속성 이 필요하지 않을 수도 있습니다 . 각각 직접 명확한 "UI"역할 또는 명확한 "데이터"역할을 갖는 한 지시문을 사용하여 모든 것을 수행 할 수 있습니다.
언급해야 할 단점이 있습니다. 응용 프로그램에 더 많은 "이동 부품"을 제공하므로 약간의 복잡성이 추가됩니다. 그러나 각 부품이 명확한 역할을하고 잘 작동하면 (단위 + E2E 테스트) 가치가 있으며 장기적으로 전반적인 이점이 있다고 주장합니다.