Question

我希望能够在我的主html视图中包含3次相同日历的不同行为（根据您选择的日期显示3个不同的日期）。所以我有一个html视图，包含相同日历的3 ng-include块，我在另一个文件中。我需要以某种方式分离每个日历的行为......我有一个日历控制器，我还有一个主视图的控制器，我在下面提到。我的主要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。为您的日历创建一个指令，并在同一页面重复使用它。确保您为指令使用隔离范围。

如果我在同一个视图中多次使用相同的ng-include，如何提供不同的行为？

1 个答案: