AngularJS가 매개 변수가있는 부분 템플릿을 만듭니다.

Question

내가 원하는 것을 얻으려면 아래 SO 질문을 통과했습니다.

AngularJs Include Partial Template

angularjs partial template with specific scope

Partial views in AngularJS

create a single html view for multiple partial views in angularjs

는 - 내가 원하는 가까이 보인다.

하지만 내 사례가 모두 다름이라고 생각합니다. 그러므로 질문입니다.

나는 수많은 것을 반복해야하는이 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>