AngularJS - ng-include 模板中的表单范围绑定

Question

我是 Angular 的新手，我一直在将一个网络表单从 Zurb 的基础和讨厌的 JQuery 移植到 Angular。我正在尝试将我的网络表单的每个部分作为模板加载，同时仍将字段绑定到范围。

表单的各个部分是从一个 json 对象中动态包含的，该对象存储有关每个部分的基本信息：

app.coffee：

app = angular.module('plunker', []);

app.controller 'MainCtrl', ($scope) ->
  # pre-loaded form data
  $scope.data =
    primInv:
      vacation: false
    funding_opportunity:
      sponsor: "sponsor name"

  # details about different sections of the form
  $scope.sections = [
    {
      name: "Principal Investigator"
      details: "Please explain who you are and when you need funding."
      formSection: "principal-investigator"
    }
    {
      name: "Funding Opportunity"
      details: "Please provide information about the funding opportunity to which you plan to apply."
      formSection: "funding-opportunity"
    }
  ]

  # get the url for the section template
  $scope.sectionUrl = ($index) ->
    return $scope.sections[$index].formSection + '-section.html'

index.html 正文：

<form name="mainForm"
  data-abide
  ng-controller="MainController"
  novalidate>

<div ng-repeat="section in sections track by $index">
  <seperator ng-if="$index > 0"></seperator>
  <div class="row">
    <div class="large-4 medium-12 columns">
      <div class="row">
        <h4>{{ section.name }}</h4>
      </div>
      <div class="row">
        <p>{{ section.details }}</p>
      </div>
    </div>

    <p>{{ sectionUrl($index) }}</p>
    <div class="large-8 medium-12 columns">
      <div ng-include src="sectionUrl($index)"></div>
    </div>
  </div>
</div>

第一部分完美运行，当我输入输入字段时，范围已更新，我们可以在测试元素中看到它。

样本输入来自 principal-investigator-section.jade：

label(for='era_commons_id')
  | eRA Commons ID
  small if Federal
  input(type='text',
        ng-model='data.prinInv.federal_id')

第二部分根本不起作用。似乎没有什么可以绑定的。我在这里做错了什么？

样本输入来自 资金-机会-section.jade

label(for="funding_opportunity")
  | Funding Opportunity
  input(type="text",
        ng-model: 'data.funding_opportunity.details',
        name="funding_opportunity",
        placeholder="Funding Opportunity")

我确信这是一个菜鸟问题，因为我对 Angular 还很陌生，但我已经研究了一段时间，它开始让我发疯了！

所有附加页面（包括包含的部分）都可以在Plunker 上找到

Answer 1

plunkr 可以很好地实际测试您的代码，但我注意到您的示例代码中有一个错字：

ng-model: 'data.funding_opportunity.details',

应该是

ng-model='data.funding_opportunity.details'，

通过纠正错字检查它是否有效，否则请提供一个有效的例子

Answer 2

我不熟悉jade，但你不是必须写ng-model=而不是ng-model:吗？