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

Invoke Angularjs controller method from Angularjs view which related to another Angularjs controller

本文关键字:Angularjs 控制器 视图 调用 方法 另一个      更新时间:2023-09-26

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

主页.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");
  })
  };
 });

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()方法。

要做到这一点,您需要控制器之间进行通信。通信可以使用以下任何一种方法

  1. 使用$emit+$on/$broad+$on
  2. 制作一个包含该功能的服务,并将其注入到希望相互通信的控制器中

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

你已经知道如何提供服务了。对于方法1,示例如下:

app.controller('One', ['$scope', '$rootScope'
    function($scope) {
        $rootScope.$on("CallParentMethod", function(){
           $scope.parentmethod();
        });
        $scope.parentmethod = function() {
            // task
        }
    }
]);
app.controller('two', ['$scope', '$rootScope'
    function($scope) {
        $scope.childmethod = function() {
            $rootScope.$emit("CallParentMethod", {});
        }
    }
]);