AngularJS中相同部分模板的多个“实例”

我有一个AngularJS应用程序，可以显示几个图。每个绘图都有一组日期控件，允许用户更改绘图数据范围的开始和结束日期。日期控件作为部分模板加载到uib popover中

我一直在为每个绘图使用单独的部分模板。我在标签之间的页面中包含模板，并使用控件加载它

这很好，但是为每个绘图使用单独的模板似乎非常重复，特别是因为我在页面上有几个绘图。我尝试创建一个模板，使用ng init设置该模板实例的绘图名称，并希望这将允许我动态地将绘图值加载到该特定绘图的模板中。大致如下：

var-app=angular.module'myApp'，[]； 应用程序控制器'myCtrl'，函数$scope{ $scope.plots={ goodPlot：{ 开始日期：2018年1月1日， 完：2019年1月1日 }, 更好的地段：{ 开始日期：2018年5月5日， 完：2019年10月3日 } }; }; 第一个情节 第二个情节 开始日期 结束日期

---

使用组件实例化模板：

app.component("myPlotControls", {
    bindings: { "plot", "<" },
    templateUrl: "plotControls.tmpl",
})

用法：

<my-plot-controls plot="plots.goodPlot"></my-plot-controls>

<my-plot-controls plot="plots.betterPlot"></my-plot-controls>

  <script type="text/ng-template" id="plotControls.tmpl">
    <div class="form-group">
      <label class="control-label">Start Date</label>
      <input type="text" class="form-control" ng-model="$ctrl.plot['start']">
    </div>
    <div class="form-group">
      <label class="control-label">End Date</label>
      <input type="text" class="form-control" ng-model="$ctrl.plot['end']">
    </div>
  </script>

组件创建一个隔离作用域，以便同一模板的多个实例化在父作用域中不会冲突

有关详细信息，请参阅