KnockoutJS와 같은 AngularJS의 HTML 템플릿

Question

HTML 템플릿은 제공된 데이터를 KnockoutJS의 오브젝트로 여러 번 사용할 수 있으므로 AngularJS에서 동일한 기능을 찾는 데 어려움이 있습니다. KO 문서의 아래 URL을보십시오.

http://knockoutjs.com/documentation/template-binding.html

<div data-bind="template: { name: 'person-template', data: buyer }"></div> 
<div data-bind="template: { name: 'person-template', data: seller }"></div> 

<script type="text/html" id="person-template"> 
    <h3 data-bind="text: name"></h3> 
    <p>Credits: <span data-bind="text: credits"></span></p> 
</script> 

<script type="text/javascript"> 
    function MyViewModel() { 
     this.buyer = { name: 'Franklin', credits: 250 }; 
     this.seller = { name: 'Mario', credits: 5800 }; 
    } 
    ko.applyBindings(new MyViewModel()); 
</script> 

당신은 "구매자"와 "판매자"템플릿 객체로 전달하고, 녹아웃 JS에 따라 렌더링하는 방법을 관찰 할 수

.

AngularJS와 비슷한 구현이 필요합니다. 아래 예를 살펴보십시오.

<script type="text/ng-template" id="someId">{{name}}</script> 

<ng-include src="'someId'" onload="name='FirstValue'" ></ng-include> 
<ng-include src="'someId'" onload="name='SecondValue'" ></ng-include> 

위와 같은 방법을 시도했지만 결국 양쪽 모두 ng-include가 "test1"텍스트를 생성합니다. 내가 다른 결과를 원하는 모두 NG-포함, 최초의 "FirstValue"과 두 번째 "SecondValue"

여기에서보세요 : http://plnkr.co/edit/DQgPZ9GKKLnwSvOggY3M?p=preview

하는 방법은 HTML 템플릿에 데이터 개체를 전달할 수 있으며, 그에 따라 렌더링? .

Answer 1

템플릿을 다시 사용하려는 경우 범위가 포함 된 directives을 만들 수 있습니다.

템플릿

<script type="text/ng-template" id="someId.html"><span>{{name}}</span></script> 

지침

myApp.directive("myTemplate", function() { 
    return { 
     restrict: "E", 
     scope: { 
      name: "=" 
     }, 
     replace: true, 
     templateUrl: "someId.html" 
    }; 
}); 

사용

<my-template name="name"></my-template> 

Example