Question

我是棱角分明的新人。我有一个显示名单列表的小程序。我使用listController来管理显示列表，使用editController来提交更多名称，或者将列表重置为初始状态。我保存了两个控制器都可以访问的服务中的名称列表。

问题是当editController重置列表时，listController仍然不知道它。我一直在脑子里绞尽脑汁，如果有人能快速看一下，看看问题是什么，我会很感激吗？

＆＃13;

<!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>

＆＃13;

Answer 1

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

MyFactory服务被初始化并创建一个列表数据，我们称之为列表list1
MainCtrl初始化并获取list1数据
EditorCtrl初始化
输入一些数据并保存数据，这将被放入list1
按重置，重新创建列表，并且不再在服务中引用list1 ..现在我们有list2。
输入一些数据并保存数据，这将被放入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 - 在两个控制器之间共享服务的数据

1 个答案: