从Angularjs视图调用与另一个Angularjs控制器相关的Angularjs控制器方法

Question

我是Angularjs的新手，我创建了一个简单的Web应用程序，它从用户那里获取详细信息并在视图中显示详细信息。我从另一个角度视图调用一个控制器的方法时遇到问题。任何人都可以帮助我，谢谢。

home.html的

  <div id="main">
  <div id="first">
  <form ng-controller="homeController as model" ng-submit="push();">
  <h1>Vehicle Form</h1>
  <h4>Please fill all entries.</h4>
  <br>
 <label>Model :</label>
 <input name="dname" placeholder="Enter Model" type="text" ng-model="model.user.model">
  <br>
 <label>Name :</label>
 <input name="demail" placeholder="Enter name" type="text" ng-model="model.user.name">
 <br>
 <label>Color :</label>
 <input name="demail" placeholder="Enter color" type="text" ng-model="model.user.color">
 <br>
 <label>Price :</label>
 <input name="demail" placeholder="Your Email" type="text"ng-   model="model.user.price">
  <br>
  <input name="dsubmit" type="submit" value="Send">
 </form>
 </div>
 </div>
 <br>
 <br>
 <h1>Vehicle Table </h1>
 <table class="table table-striped table-hover table-users" ng-controller="homeController">
            <thead>
                <tr>

                    <th>Id</th>
                    <th>Model</th>
                    <th>Name</th>
                    <th>Color</th>
                    <th>Price</th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>

            <tbody>

                <tr ng-repeat="vehicle in hello">

                    <td>{{vehicle.id}}</td>
                    <td>{{vehicle.model}}</td>
                    <td>{{vehicle.name}}</td>
                    <td>{{vehicle.color}}</td>
                    <td>{{vehicle.price}}</td>
          <td><a class="btn mini blue-stripe" ui-sref="about" ng-click="setValue(vehicle.id)">Edit</a></td>
          <td><a href="#" class="confirm-delete btn mini red-stripe" role="button">Delete</a></td>
      </tr>
    </tbody>

 </table>

home.js（控制器文件）

 var myapp = angular.module('demo').controller("homeController",    function($scope,myService){

 myService.async().then(function(d){
    $scope.hello=d.data;
 });

 var model=this;
    model.user={
            id:"",
           model:"",
           name:"",
          color:"",
          price:""
        };

     $scope.push = function(){
     myService.saveUser(model.user);
     model.user='';
     }

  });

about.html

<div id="main">
<div id="first">
    <form ng-controller="aboutController" ng-submit="addValue();">
        <h1>Vehicle Edit Form</h1>
        <br>
        <label>Id :</label>
        <input name="id" placeholder="Enter Id" type="text" ng-model="id" value="value.id">
        <br>
        <label>Model :</label>
        <input name="model" placeholder="Enter Model" type="text" ng-model="model" value="value.model">
        <br>
        <label>Name :</label>
        <input name="name" placeholder="Enter name" type="text" ng-model="name" value="value.name">
        <br>
        <label>Color :</label>
        <input name="color" placeholder="Enter color" type="text" ng-model="color" value="value.color">
        <br>
        <label>Price :</label>
        <input name="price" placeholder="Your Email" type="text" ng-model="price" value="value.price">
        <br>
        <input name="update" type="Update" value="Send">
    </form>
  </div>
 </div>

about.js（第二控制器）

  angular.module('demo').controller("aboutController", function($scope, aboutService) {
  $scope.value;
  $scope.setValue = function() {
     aboutService.getVehicle().success(function (response) {
       $scope.value = studs.data;
     })
  };

$scope.addValue = function () {
  var stud = {
    id:"$scope.id",
    model:"$scope.model",
    name:"$scope.name",
    color:"$scope.color",
    price:"$scope.price"

  };
  aboutService.setVehicle(stud).
  success( function (){
    concole.log("hello");
  })
  };
 });

rest.js（模块文件）

 var myapp = angular
.module('demo', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/home');
    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'Views/home.html',
            controller: 'homeController'
          })

        .state('about', {
            url: '/about',
            templateUrl: 'Views/about.html',
            controller: 'aboutController'
        })
        .state('contact', {
            url: '/contact',
            templateUrl: 'Views/contact.html',
            controller: 'contactController'
        });

});

homeService.js

myapp.factory('myService',function($http){
var myService={
  async : function(){
    var promise= $http.get('http://192.168.50.127:8080/SpringRestfulVehicleDemo2/vehicle/all').then(function(response){
     return response;
    });
    return promise;
   },
  saveUser : function(userArray){
$http.post('http://192.168.50.127:8080/SpringRestfulVehicleDemo2/vehicle/add ',userArray).success(

   function(userArray,status,headers,config){
  });
 }
};
 return myService;
});

aboutService.js（另一个服务文件）

myapp.factory('aboutService',function($http){
var aboutService={};
var   urlBase='http://192.168.50.127:8080/SpringRestfulVehicleDemo2/vehicle/';

 aboutService.getVehicle = function () {
 retun $http.get(urlBase+'/byId/:id');
};
 aboutService.setVehicle= function (){
 return $http.post(urlBase+'/update/:id');
}
return aboutService;
});

我正在做的是从服务器获取数据并在表格中显示数据。我想在另一个视图中编辑选定的行。当我点击home.html中的编辑按钮时，我遇到了问题。它应该调用about.js（控制器）setValue()方法。

Answer 1

要执行此操作，您需要控制器相互通信。可以使用以下任何方法进行通信

1. 在
上使用$ emit + $ on / $ broadcast + $
2. 创建包含该功能的服务，并将其注入到希望相互通信的控制器中。

在您的情况下，您可以使用它将 setValue 方法移动到控制器之间的共享服务，也可以使用方法1.

您已经知道如何提供服务。对于方法1，示例如下：

{{1}}