Angularjsディレクティブは手動でテンプレートをバインドします

Question

私はマンモステーブルを作成しています。テーブルの各セルをクリックするとモーダルが開き、そのセルに関するいくつかの詳細がバックエンドからフェッチされて表示されます。このモーダルはたくさん再利用されなければならないので、私はそれを角度指令として作成しています。

.directive('ltInstanceStatus', function() { 
    return { 
     restrict: 'A', 
     scope: { 
      instanceId: '=ltInstanceId' 
     }, 
     link: function(scope, element, attributes) { 
      var getInstanceStatus = function() { 
       // get Instance Status and pop modal 
      }; 

      element.bind('click', getInstanceStatus); 
     }, 
     templateUrl: '/assets/templates/instance_status.html' 
    }; 
}) 

これはうまくいきますが、セルの数が増えるとページの読み込み量も増えると思います。私はモーダルのためのHTMLの単一の部分を持っていると同じ方法で別のフォルダにそれを維持すると同時にデータを変更して何度も再利用する方法がありますか？

Answer 1

このコードチェック

.directive("chartDir",function(){ 

    return { 
    restrict: 'E', 
    transclude: true, 
    template: '<h2>Hello world!</h2> <div role="tabpanel" ng-transclude></div>', 
    scope: { }, 
    link: function(scope, elem, attr) { 
     elem.on('click', function() { 
       scope.$apply(function() { 

       }); 
     }); 
    } 
    } 

}); 

ごとにユニークな値を渡す一般的な機能ですべてのセルをクリックして、リターンが共通のサービスを作成し、データを取得し適用します呼び出します。