Question

我有一个html文件，我想在两个地方包含它：

<div ng-if="flag1" ng-include = templatepath></div>
<div ng-if="flag2" ng-include = templatepath></div>

$scope.templatepath = 'template.html'

template.html

<h2> Name is {{name}} </h2>

单击功能时，

flag1和flag2会更改。我希望名称包含不同的值。但是，当我在控制器中更改名称时，这两行都会更改。我该怎么办？

Answer 1

使用组件：

<my-component name="name1"></my-component>
<my-component name="name2"></my-component>

app.component("myComponent", {
    bindings: { name: '<' },
    templateUrl: 'template.html'
})

<h2> Name is {{$ctrl.name}} </h2>

组件使用隔离范围和绑定。

有关更多信息，请参见