Несколько «экземпляров» одного и того же частичного шаблона в AngularJS

Question

У меня есть приложение AngularJS, которое отображает несколько графиков. Каждый график имеет набор элементов управления датами, которые позволяют пользователю изменять начальную и конечную даты диапазона данных на графике. Элементы управления датой загружаются как частичный шаблон в UIB-popover.

Я использовал отдельные частичные шаблоны для каждого графика. Я включаю шаблон на странице между тегами <script type="text/ng-template"></script> и загружаю его, используя <button uib-popover-template="foo">Controls</button>.

Это прекрасно работает, но наличие отдельных шаблонов для каждого графика кажется очень повторяющимся, тем более что у меня есть несколько графиков на странице. Я попытался создать один шаблон, задать имя графика для этого «экземпляра» шаблона, используя ng-init, и надеялся, что это позволит мне динамически загружать значения графика в шаблон для этого конкретного графика. Что-то вроде этого:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.plots = {
    "goodPlot": {
      "start": "1/1/2018",
      "end": "1/1/2019"
    },
    "betterPlot": {
      "start": "5/5/2018",
      "end": "3/10/2019"
    }
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div ng-app="myApp" ng-controller="myCtrl">
  <h4>First Plot</h4>
  <div ng-init="thisPlot = plots.goodPlot" ng-include="'plotControls.tmpl'"></div>
  <hr/>
  <h4>Second Plot</h4>
  <div ng-init="thisPlot = plots.betterPlot" ng-include="'plotControls.tmpl'"></div>

  <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="thisPlot['start']">
    </div>
    <div class="form-group">
      <label class="control-label">End Date</label>
      <input type="text" class="form-control" ng-model="thisPlot['end']">
    </div>
  </script>
</div>

Но, как вы можете видеть, даты начала / окончания обоих графиков одинаковы. Я понимаю, почему это так - они оба связаны с одинаковыми переменными. Но я не могу найти решение для достижения желаемого результата.

По сути, я хочу создать несколько «экземпляров» одного и того же шаблона, но с разными значениями переменных, которые должны быть установлены до ng-include.

Может кто-нибудь предложить какие-либо предложения?

Answer 1

Использование компонента для создания экземпляра шаблона:

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>

Компоненты создают изолированную область видимости, чтобы несколько экземпляров одного и того же шаблона не конфликтовали в родительском объекте.scope.

Для получения дополнительной информации см.

• Руководство разработчика AngularJS - Создание пользовательских компонентов