AngularJS

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>

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

示例输入来自首席研究员-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:吗？

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

AngularJS - Form scope binding in ng-include templates

forms

coffeescript

angularjs-ng-include

pug