javascript - 如果我在同一 View 上多次使用同一个 ng-include，如何为它提供不同的行为？

Question

我希望能够对同一个日历有不同的行为(根据您选择的日期显示 3 个不同的日期)，我在主 html View 中包含了 3 次。

所以我有一个 html View ，其中包含同一日历的 3 个 ng-include block ，这些 block 位于另一个文件中。我需要以某种方式分离每个日历的行为...我有一个日历 Controller ，我还有一个主视图 Controller ，我在下面提到。我的主要 html 代码如下所示:

<div ng-include="template.calendar"></div>
<h4>{{dateCalendar1}}</h4>
<div ng-include="template.calendar"></div>
<h4>{{dateCalendar2}}</h4>
<div ng-include="template.calendar"></div>
<h4>{{dateCalendar3}}</h4>

以下是 calendar.html 模板的代码:

<div class="container-fluid" ng-controller="CalendarController" style="text-align:left; padding-bottom:10px">
<label>Día: </label>
<div class="row">
    <p class="input-group">
        <input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" ng-change="actualizarFecha()" close-text="Close"/>
        <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open2()">
                <i class="glyphicon glyphicon-calendar"></i>
            </button>
        </span>
    </p>
</div>

Answer 1

似乎您需要某种可重用的组件，其中每个组件都有独立的范围。在 AngularJS 中，这些被称为 directives 。为您的日历创建一个指令，并在同一页面上重复使用它。确保您的指令使用隔离范围。