时间戳

首页 > 解决方案 > AngularJS 中同一部分模板的多个“实例”

angularjs - AngularJS 中同一部分模板的多个“实例”

问题描述

我有一个显示多个绘图的 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.

任何人都可以提供任何建议吗？

标签： angularjs

解决方案

使用组件实例化模板：

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>

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

有关详细信息，请参阅

推荐阅读