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

回答

相关问题