javascript - 跨 Controller 共享 ng-repeat 表单字段的数据

Question

我正在制作一张名片订单，其中包含一个添加另一张名片的按钮。我希望该按钮创建另一个名片表单，并将表单中的所有数据与另一个 View 的 Controller 共享。

我有两个模板连接到各自的 Controller 。

• order.html、order.js
• confirm.html、confirm.js

代码示例:

order.js

.factory('Cards', function () {
var Cards = []

return Cards
})
.controller('TestCtrl', function ($scope, Cards) {
  $scope.person0={name: '', email:'', description:''}
  $scope.person1={name: '', email:'', description:''}
  if (Cards.length < 2) {
    Cards.push($scope.person0);
    Cards.push($scope.person1);
  }
 }

order.html

<md-toolbar layout='column' layout-align='center' ng-repeat="card in Cards">
        <md-button layout-margin layout-padding flex='100' class='md-raised md-primary'>
          <h1>{{ card.name }}</h1>
          <h1>{{ card.email }}</h1>
          <h1>{{ card.description }}</h1>
        </md-button>
        <div layout='column' layout-align='center center' >
          <input type="text" style="color:black;" flex='' ng-model="card.name">
          <input type="text" style="color:black;" flex='' ng-model="card.email">
          <input type="text" style="color:black;" flex='' ng-model="card.description">
        </div>
 </md-toolbar>

about.js

.controller('AboutCtrl', function ($scope, Cards) {
    $scope.person0=Cards[0];
    $scope.person1=Cards[1];
  });

about.html

<div ng-repeat="card in Cards">
    <md-toolbar layout='column' layout-align='center'>
      <md-button layout-margin layout-padding flex='100' class='md-raised md-primary'>
        <h1>{{card.name}}</h1>
        <h1>{{card.email}}</h1>
        <h1>{{card.description}}</h1>
      </md-button>
    </md-toolbar>
    <md-content>

    </md-content>
  </div>

我希望order.html中的表单数据显示在confirm.html上

两个 View 都会记录 Cards 集合，但不会显示 ng-repeat 模板。

Answer 1

放慢脚步，仔细观察。

在 about.html 中，您似乎想要循环浏览卡片。

<div ng-repeat="card in Cards">

但在 about.js 中，每个单独的卡片都分配给范围。

$scope.person0=Cards[0];  // no reference in template

要解决此问题，请将卡片放在 about.js 范围内。

$scope.Cards = Cards