AngularJS中的HTML模板像KnockoutJS

HTML模板可以多次使用提供的數據作爲KnockoutJS中的對象，我在使用AngularJS找到相同的功能時遇到困難。看看下面的KO文檔的URL。AngularJS中的HTML模板像KnockoutJS

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模板，並相應地呈現？。

來源

2013-06-20 Kaushal O

如果要重新使用模板，可以創建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

來源

2013-06-20 14:05:41

我試過了你在下面的提示器中建議的方式，請檢查並讓我知道如果我做錯了什麼，它不起作用，因爲我遵循了你在此處提出的建議。 http://plnkr.co/edit/DQgPZ9GKKLnwSvOggY3M?p=preview –

'templateUrl'必須匹配模板的id，並且模板也必須有一個根元素，所以如果您將名稱包裝在' {{ name}}'一切正常，請參閱示例 –

謝謝，它按照我的要求工作。 –

AngularJS中的HTML模板像KnockoutJS

回答

相關問題