AngularJSはパラメータ付き部分テンプレートを作成します

Question

私が欲しいものを得るためにはSO以下の質問をしました。

create a single html view for multiple partial views in angularjs

Partial views in AngularJS

AngularJs Include Partial Template

angularjs partial template with specific scopeは - 私が欲しいものに近い見えます。

しかし、私のケースはすべてのものとは異なると思います。したがって、質問。

私はこれを何度も繰り返す必要があるHTML構造を持っています。

<tr> 
    <td> 
     Enitity1 
    </td> 
    <td> 
     <input type="radio" name="entity1" value="option1" /> 
    </td> 
    <td> 
     <input type="radio" name="entity1" value="option2" /> 
    </td> 
    <td> 
     <input type="radio" name="entity1" value="option3" /> 
    </td> 
    <td> 
     <input type="radio" name="entity1" value="option4" /> 
    </td> 
    <td> 
     <input type="radio" name="entity1" value="option5" /> 
    </td> 
</tr> 

エンティティの名前をパラメータとして渡し、パラメータに基づいてこのHTMLテンプレートをレンダリングします。

私は以下のようなテンプレートを作成しました。

<tr> 
    <td> 
     {{entity}} 
    </td> 
    <td> 
     <input type="radio" name="{{entity}}" value="option1" /> 
    </td> 
    <td> 
     <input type="radio" name="{{entity}}" value="option2" /> 
    </td> 
    <td> 
     <input type="radio" name="{{entity}}" value="option3" /> 
    </td> 
    <td> 
     <input type="radio" name="{{entity}}" value="option4" /> 
    </td> 
    <td> 
     <input type="radio" name="{{entity}}" value="option5" /> 
    </td> 
</tr> 

私のコントローラ

app.controller("entitiesController", ["$scope", 
    function entitiesController($scope) { 
     $scope.init = function init(entity) { 
      $scope.entity= entity; 
     }; 
    } 
]); 

そして私は<tbody>要素内に以下のように複数のエンティティのために同じことをレンダリングしようとしています。

<ng-include src="Common/entities.html" ng-controller="entitiesController" ng-init="init('Entity1')"></ng-include> 
<ng-include src="Common/entities.html" ng-controller="entitiesController" ng-init="init('Entity2')"></ng-include> 
<!-- Some more entities here...--> 

しかし、動作しません。コンソールにもエラーは表示されません。

どうすればよいですか？これを処理する適切な方法は何ですか？それをテンプレートで処理することは可能ですか？それとも、すべてのエンティティに対してHTMLを手動で入力する必要がありますか？

Answer 1

これを行うにはdirectiveにすることができます。何かのように、今

myApp.directive("myEntity", function() { 
    return { 
    restrict: "E", 
    scope: { 
     entity: "=" 
    }, 
    templateUrl: "Common/entities.html" 
    } 
}) 

、あなたはentityObjがあなたの$scope（またはそれに応じている場合には、変数をある<my-entity entity="entityObj"></my-entity>ようにそれを使用し、最後にあなたがすでにあるCommon/entities.htmlで作成したテンプレート、

<tr> 
    <td> 
     {{entity}} 
    </td> 
    <td> 
     <input type="radio" name="{{entity}}" value="option1" /> 
    </td> 
    <td> 
     <input type="radio" name="{{entity}}" value="option2" /> 
    </td> 
    <td> 
     <input type="radio" name="{{entity}}" value="option3" /> 
    </td> 
    <td> 
     <input type="radio" name="{{entity}}" value="option4" /> 
    </td> 
    <td> 
     <input type="radio" name="{{entity}}" value="option5" /> 
    </td> 
</tr> 

を使用することができますcontrollerAs構文を使用してください）

EDIT：他の方法は、属性としてではなく要素として指示を持つことです。

myApp.directive("myEntity", function() { 
    return { 
    restrict: "A", 
    ... 
    } 
}) 

そして、<tr>をテンプレートから削除します。今のように、

<tbody> 
    <tr my-entity entity="entityObj"> 
    </tr> 
</tbody>