Question

我的问题是如何将1个控制器$ scope调用到Angular JS中的另一个控制器。基本上结构就是，我有两个控制器，一个是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);
    }
});

这是我的提琴手http://jsfiddle.net/npm5u5h0/ 第一次如果你点击编辑它的工作正常但是如果你添加一个新学生并且在编辑新创建的学生之后文本字段没有显示数据。

Answer 1

为什么没有两个控制器都调用同一个服务？他们可以将信息放在服务中，并让他们都参考。

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;
    };
}]);

Answer 2

您可以使用诸如“addController”

之类的ID命名addContoller div

然后从viewController中，您可以使用

获取另一个范围

var myEl = angular.element（document.querySelector（'＃addController'））; var myScope = angular.element（myEl）.scope（）;

然后$ scope.name = myScope.name

如何在AngularJS中的另一个控制器中调用/使用$ scope的1个控制器

2 个答案: