从一个控制器调用服务会自动更新另一个控制器的作用域变量

Question

任何人都可以在这里帮助我。

https://plnkr.co/edit/vrHzXAelRlPKUrjfkYgw

    <!DOCTYPE html>
    <html>

    <head>
    <link rel="stylesheet" href="style.css">
    <script src="angular.js"></script>
    <script src="script.js"></script>
    </head>

    <body ng-app="studentModule">
    <div ng-controller="boyCtrl">
        Boy: <input type="text" ng-model="name" > <br/>
        Add: <input type="button" value="add" ng-click="addBoy();" >
            {{name}}
    </div>

    <br/>

    <div ng-controller="girlCtrl">
        Girl: <input type="text" ng-model="name" /> <br/>
        Add: <input type="button" value="add" ng-click="addGirl();" >
            {{name}}
    </div>
    <br/>

    <div ng-controller="displayCtrl">
        Display list <input type="button" value="display" ng-
 click="getStudents()">
        <table>
            <tr>
               <th>name</th>
            </tr>
            <tr ng-repeat="student in students  track by $index">
               <td>{{student}}</td>
             </tr>
         </table>
    </div>
    </body>
    </html>

脚步：

1-在男孩文本框中添加一个名称。

2-点击添加按钮对男孩。

3-单击显示按钮，显示名称。

4-在男孩文本框中添加另一个名称。

5-单击添加按钮。

问题：即使未单击显示按钮，名称仍显示在表中。

Answer 1

由于角度支持两种方式绑定，因此将服务值绑定到数组。 为了防止这种情况，请使用angular.copy

$scope.getStudents = function() {
    $scope.students = angular.copy(studentService.displayStudents())
};

演示