Блог

У меня есть приложение 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 .

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

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

 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>
  

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

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

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