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>

组件创建一个隔离范围，以使同一模板的多个实例在父范围内不会冲突。

有关更多信息，请参见

AngularJS Developer Guide - Creating Custom Components

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

1 个答案: