Question

我正在一个网站上工作，并且在某些页面上重复使用布局，我已经使用angularjs ng-include directive来实现这一目标。

我的ng-include页面上有一个hrFormReviewDetails.html，其中包括我的starter.html。
然后，我的ng-include上有一个payrollFormReviewDetails.html，其中包括hrFormReviewDetails.html页面。

下图代表解决问题的方法：

ng-include的第一个starter.html可以正常工作，但是包含ng-include的第二个hrFormReviewDetails.html不起作用。

hrFormReviewDetails.html页用于加载从starter.html页提交的详细信息以及完成hrFormReviewDetails.html表单所需的特定详细信息。 这种方法很好用。

payrollFormReviewDetails.html页用于加载从starter.html和hrFormReviewDetails.html页提交的详细信息。然后需要特定的细节来完成payrollFormReviewDetails.html表单。 这不起作用。

我得到的是将starter.html和hrFormReviewDetails.html页面加载到payrollFormReviewDetails.html页面中，但是没有数据加载到html字段中。我没有控制台错误。

我的问题是，您是否可以使用html加载多个已有html页的ng-directive页？

代码段：

starter.html：

<form name="newStartForm" ng-submit="saveNewStarterForm(newStartForm.$valid)" novalidate autocomplete="off">

    <!-- Section to contain the employee details for the new start -->
    <div class="form-control">

            <h3>EMPLOYEE DETAILS</h3>
            <div class="margin-bottom-small"><small><strong>Fields marked with an asterisk (*) are required.</strong></small></div>

            <div class="form-group" ng-class="{'alert alert-danger': newStartForm.$submitted && newStartForm.title.$invalid}">
                <label class="col-lg-12 col-md-12 col-sm-12"><strong>*</strong> Title:</label>
                <select id="title" class="col-lg-6 col-md-6 col-sm-6" ng-model="newStart.title" name="title" required>
                    <option disabled value="">Select a title...</option>
                    <option value="Mr">Mr</option>
                    <option value="Mrs">Mrs</option>
                    <option value="Miss">Miss</option>
                    <option value="Ms">Ms</option>
                </select>
            </div>
     </div>
</form>

hrFormReviewDetails.html：

<form name="newStartForm" ng-submit="saveHrNewStarterReviewForm(newStartForm.$valid)" novalidate autocomplete="off">

    <div ng-include="'views/starter.html'"></div>

    <div class="form-control form-margin-top">

            <h3>NOTES FROM HR :- RETAIL / PRIMAL</h3>

            <div id="hourly-rate-container" class="form-group">
                <label class="col-lg-12 col-md-12 col-sm-12">Hourly Rate (£): </label>
                <input id="hourlyRate" class="col-lg-6 col-md-6 col-sm-6" type="text" ng-model="newStart.hourlyRate" ng-keypress="preventNonNumericalInputWithDecimal()" name="hourlyRate" />
            </div>
      </div>
 </form>

payrollFormReviewDetails.html：

<form name="newStartForm" ng-submit="savePayrollNewStarterReviewForm(newStartForm.$valid)" novalidate autocomplete="off">

    <div ng-include="'views/hrFormReviewDetails.html'"></div>

    <div class="form-control form-margin-top">
        <div class="center">
            <h3>FAO PAYROLL:</h3>

            <div class="form-group">
                <label class="col-lg-12 col-md-12 col-sm-12">Sage Pay Reference: </label>
                <input id="sagePayReference" class="col-lg-6 col-md-6 col-sm-6" type="text" ng-model="newStart.sagePayReference" name="sagePayReference" />
            </div>

            <div class="form-group">
                <label class="col-lg-12 col-md-12 col-sm-12">Pension Type: </label>
                <input id="pensionType" class="col-lg-6 col-md-6 col-sm-6" type="text" ng-model="newStart.pensionType" name="pensionType" />
            </div>
        </div>
    </div>
</form>

注意：：这是每个html页的精简版本。

为什么此嵌套的ng-include无法显示结果

0 个答案: