javascript - 如何在 AngularJS 的另一个 Controller 中调用/使用 $scope 的 1 个 Controller

Question

我的问题是如何在 Angular JS 中将 1 个 Controller $scope 调用到另一个 Controller 。基本上结构是，我有两个 Controller ，一个是 AddController，另一个是 ViewController。基本上我想要在 ViewController 中包含 AddController 字段的表单。单击“编辑”后，$rootScope.name = data.name、电子邮件和电话不会在表单字段上显示数据。

我已经尝试过了。

在 HTML 中

<div ng-app="app">
  <div ng-controller="AddController">
    <legend>Add Students</legend>
    <form class="well">
      <label>Name</label>
      <input type="text" name="name" ng-model="name" />
      <label>Email</label>
      <input type="text" name="email" ng-model="email" />
      <label>Phone</label>
      <input type="text" name="phone" ng-model="phone" />
      <br/>

      <div ng-if="isUpdate">
        <input type="hidden" name="id" ng-model="id" />
      </div>

      <div ng-show="addData">
        <input type="button" value="Save" ng-click="saveStudent()" class="btn btn-primary" />
      </div>
      <div ng-show="!addData">
        <input type="button" value="Update" ng-click="updateStudent()" class="btn btn-primary" />
      </div>
    </form>
  </div>
  <div ng-controller="ViewController">
    <legend>View Students</legend>
    <table class="table table-striped table-bordered">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
          <th>Phone</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="student in students">
          <td>{{ $index; }}</td>
          <td>{{ student.name }}</td>
          <td>{{ student.email }}</td>
          <td>{{ student.phone }}</td>
          <td><a href="javascript:void(0)" ng-click="edit($index)">Edit</a> | <a href="javascript:void(0)" ng-click="delete($index)">Delete</a></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

在 JS 中

var app = angular.module('app', []);

app.service('StudentsData', function($rootScope){
    var s;
    var students = [
        {name: 'Tariq Ali', email: 'chk.webstar@gmail.com', phone: '58757'},
        {name: 'Faizan Ali', email: 'kdjy.webstar@gmail.com', phone: '24545'}
    ];

    this.list = function(){
        return students;
    }

    this.single = function(id){
        for(s=0; s<=students.length; s++){
            if(s == id){
                return students[s];
            }
        }
    }

    this.insert = function(data){
        students.push(data);
    }

    this.update = function(updatedData, id){
        for(s=0; s<=students.length; s++){
            if(s == id){
                students[s] = updatedData;
            }
        }
    }

    this.delete = function(id){
        students.splice(id, 1);
    }

    this.name = function(){

    }


});

app.controller('AddController', function($scope, StudentsData, $rootScope){

    $scope.$broadcast('someEvent', [1,2,3]);

    $rootScope.addData = true;
    $scope.saveStudent = function(){
        StudentsData.insert({name: $scope.name, email: $scope.email, phone: $scope.phone});

        $scope.name = '';
        $scope.email = '';
        $scope.phone = '';
    }

    $scope.updateStudent = function(){
        var updatedData = {name: $scope.name, email: $scope.email, phone: $scope.phone};
        StudentsData.update(updatedData, $scope.id);

        /*$scope.name = '';
        $scope.email = '';
        $scope.phone = '';
        $rootScope.addData = true;*/
    }


});

app.controller('ViewController', function($scope, StudentsData, $rootScope){

    $scope.$on('someEvent', function(event, mass) {console.log(mass)});

    $scope.students = StudentsData.list();

    $scope.delete = function(id){
        StudentsData.delete(id);
    }

    $scope.edit = function(id){
        var data = StudentsData.single(id);

        $rootScope.name = data.name;
        $rootScope.email = data.email;
        $rootScope.phone = data.phone;
        $rootScope.addData = false;
        $rootScope.isUpdate = true;
        $rootScope.id = id;
        //console.log($rootScope.addData);

        //StudentsData.update(id);
    }
});

这是我的 fiddle 手 http://jsfiddle.net/npm5u5h0/第一次，如果您单击“编辑”，其工作正常，但如果您添加新学生，并且在编辑新创建的学生后，文本字段不会显示数据。

Answer 1

为什么不让两个 Controller 都调用相同的服务呢？您可以将信息放入服务中并让他们都引用该信息。

angular.module('mycontrollers').controller('controllername', ['myService', function (myService) {
    $scope.email = myService.getEmail;
}]);

angular.module('mycontrollers').controller('controllername2', ['myService', function (myService) {
    $scope.email = myService.getEmail;
}]);

angular.module('myservices').service('myService', ['$rootScope', function ($rootScope) {
    var self = this;
    self.getEmail = function () {
       ...
       return $rootScope.email;
    };
    self.setEmail = function (email) {
        $rootScope.email = email;
    };
}]);