angularjs

Question

我是 angular 的新手。我有一个显示名称列表的小程序。我使用 listController 来管理列表的显示，使用 editController 来提交更多名称，或将列表重置为初始状态。我在两个控制器都访问的服务中保存名称列表。

问题是当 editController 重置列表时，listController 仍然不知道。我一直在绞尽脑汁解决这个问题，如果有人能快速查看并了解问题所在，我将不胜感激？

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@1.3.0" data-semver="1.3.0" src="//code.angularjs.org/1.3.0/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="myApp">
  <h1>List of People</h1>

  <div ng-controller="MainCtrl as mc">
    <ul>
      <li ng-repeat="person in mc.list">
        {{person.firstName}} {{person.lastName}}
      </li>
    </ul>
  </div>

  <form ng-controller="EditorCtrl as ec">
    <h2>Add New Person</h2>
    <fieldset>
      <label>First name
        <input ng-model="ec.person.firstName" />
      </label>
      <label>Last name
        <input ng-model="ec.person.lastName" />
      </label>
      <button ng-click="ec.save()">Save</button>
      <button ng-click="ec.reset()">Reset</button>
    </fieldset>
  </form>
</body>

</html>

Answer 1

好的，这就是您的代码运行方式

MyFactory 服务被初始化并创建一个列表数据，我们将此列表命名为 list1
MainCtrl 初始化并获取 list1 数据
EditorCtrl 初始化
输入一些数据并保存数据，这被放入list1
按重置，重新创建列表，服务中不再引用列表 1.. 现在我们有了列表 2。
输入一些数据并保存数据，这会被放入list2

但是，MainCtrl 仍然有 list1 的数据，因此不会更新。

关键是数组作为引用而不是值传递，因此如果您希望它在您的应用程序中按照应有的方式运行，请务必不要破坏数组。

当您重置列表时，它会重新创建数组并丢弃其现有引用，但 mainCtrl 中的引用仍然是旧引用。

//this will recreate the array
list = [{
  firstName: 'Rachel',
  lastName: 'Washington'
}, {
  firstName: 'Joshua',
  lastName: 'Foster'
}, {
  firstName: 'Samuel',
  lastName: 'Walker'
}, {
  firstName: 'Phyllis',
  lastName: 'Reynolds'
}];

所以不要那样做很重要，将其更改为

var data = [{
  firstName: 'Rachel',
  lastName: 'Washington'
}, {
  firstName: 'Joshua',
  lastName: 'Foster'
}, {
  firstName: 'Samuel',
  lastName: 'Walker'
}, {
  firstName: 'Phyllis',
  lastName: 'Reynolds'
}];
list.length = 0;
angular.forEach(data, function(val){
  list.push(val);
})

这样你就不会重新创建数组，请注意没有 'list = something'。

list.length = 0; //removes all items but does not remove the reference

删除项目后，您可以再次填充它。

请记住，您还应该将列表变量初始化为数组。

var list = [];

Heres the example again

angularjs - 在 2 个控制器之间共享服务数据

angularjs - sharing a service's data between 2 controllers

service

scope

controller