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支持双向绑定，它将服务值绑定到数组。为防止使用angular.copy

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

Demo

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

1 个答案: