私はeラーニング配信プラットフォームで作業を開始しました。私たちはAngularjsを選択しました（IE8上にユーザーがいるため、1.2.29）。私たちのチームはすべてAngularの新機能であり、システムを簡潔に提供するためのベストプラクティスが何であるかはわかりません。Angular 1.2.29でDOM操作を取得する
目的は、非常にコンポーネントベースの構造を持つことです。設計者は、jsonファイルを簡単に編集し、名前付きコンポーネントを必要に応じて追加できます。その背後には、各コンポーネントに独自のhtmlテンプレート、js機能ファイルとcssが必要です。
これまでのところ、「段落」と「イメージ」コンポーネントが含まれています。次のステップは、いくつかの対話機能を持つ「ポップアップ」コンポーネントを追加することでした。
私がすでに見ている問題は、app.jsファイルの 'pageController'にコンポーネント機能を追加していることです。これは非常に悪い考えです。少なくとも、各コンポーネントのその機能は、ファイルが巨大になり、扱いにくくなります。ここでapp.jsでPageControllerでは、これまでのところ、です：私は読み、チュートリアルをたくさん見て、角度サイト上のページが、私たちのプロジェクトの特定の要件は、角があるとの作業を取得する方法を理解している
app.controller('pageCtrl', ['$scope', '$routeParams', '$http', 'content', function($scope, $routeParams, $http, content) {
$http.get('json/page' + $routeParams.pageId + '.json')
.success(function(data) {
$scope.page = data;
});
$scope.getStyle = function(singleCase, device) {
if (singleCase == undefined)
return '';
return assignBootstrap(singleCase, device);
}
// function for new, interactive 'popup' component
$scope.showPopup = function (showOnClick) {
// presentation logic located here. This is a bad idea, right?
if ($('#'+showOnClick).hasClass('overlay')) {
$('#page_container').append($('#'+showOnClick));
}
$('#' + $('#' + showOnClick).attr('data-replaces')).remove();
$('.popup').addClass("hidden");
$('#'+showOnClick).removeClass("hidden");
}
$scope.pageId = $routeParams.pageId;
}]);
困難を証明する。
このページで... https://code.angularjs.org/1.2.29/docs/guide/controller
...は、DOM操作コードがディレクティブにカプセル化されるべきであると言われます（カスタムまたは内蔵のいずれか、私は仮定します）。
必要な各コンポーネントに関連付けられた小さな.jsファイルを作成したい場合、カスタム要素（restrict： "E"）ディレクティブを使用して機能をカプセル化するようにデザインをリファクタリングする必要がありますか？
私が遭遇した情報は概念ベースであり、抽象的なので、作業中のプロジェクトにどのようなコンセプトを適用すべきかを知ることは難しいです。
個々のコンポーネントのコードをカプセル化するためには、 'element restricted'ディレクティブ（事実上カスタムhtmlタグ）を使用するのがよいですか？私は、必要なコンポーネントを定義するカスタムhtmlタグのリストで終わると想像することができます。それは要素ディレクティブが何のためにあるのでしょうか？
ありがとうございました。