Question

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

表单的各个部分是从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 body：

<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")

我确信这是一个新手问题，因为我对角度很新，但我已经做了一段时间了，它开始让我疯了！

所有其他页面（包括所包含的部分）均可在Plunker

上找到

Answer 1

一个plunkr会很好地测试你的代码，但我注意到你的示例代码中有一个拼写错误：

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

应该是

NG-模型= 'data.funding_opportunity.details'，

通过更正拼写错误来检查它是否有效，否则请提供一个工作示例

Answer 2

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

AngularJS - 在ng-include模板中形成范围绑定

2 个答案: