从第二个控制器调用AngularJs第一个控制器方法

时间:2017-05-16 15:12:44

标签: javascript angularjs

我有两个名为" HomeController"的AngularJs控制器。和" VacancyController"。 我的HomeController有方法getallData()。下面我试图通过下拉列表的ng-change事件调用Homecontroller的getallData()函数。 请告诉我如何调用getallData()函数,因为我的下拉按需更改属性包含在" VacancyController"?

以下是我的代码:

HTML

<?php
        $mongo = new \MongoDB\Driver\Manager('mongodb://127.0.0.1:27017');        
        $filter = [
            //'description' => new MongoDB\BSON\Regex( '^account', 'i' )  // description STARTS with.  THis code works.
            //'phnum' => new MongoDB\BSON\Regex( '^\+1567', 'i' )      // ph number STARTS with .  This code works.
            //'phnum' => new MongoDB\BSON\Regex( '0186', 'i' )      // phnumber contains.  This code works as expected.
            'description' => new MongoDB\BSON\Regex( '^account', 'i' )
        ];
        $options = [
            'sort' => array( 'OrderBy' => -1 )
        ];
        $mongoQuery = new MongoDB\Driver\Query( $filter, $options );    
        $cursor = $mongo->executeQuery('widgets.contact', $mongoQuery);
        //var_dump($rows);
        echo "<table><th>Department</th><th>Description</th><th>Phone</th><th>Fax</th><th>Site</th>";
        foreach ($cursor as $document) {
            //var_dump($document);
            echo "<tr>";
            echo "<td>$document->department</td>";
            echo "<td>$document->description</td>";
            echo "<td>$document->phnum</td>";
            echo "<td>$document->fax</td>";
            echo "<td>$document->site</td>";
            echo "</tr>";
        }
        echo "</table>"
?>

的HomeController

<div ng-controller="VacancyController">

<p>Select a Vacancy:</p>
<select ng-model="selectedVacancy" ng-options="x.name for x in vacancieslist" ng-change=""></select>
<h1>Your selected Vacancy Title is : {{selectedVacancy.name}}</h1>

VacancyController

.controller('HomeController', function ($scope, angularSlideOutPanel, $http, $location, $window) {
getallData();



//******=========Get All Teachers=========******  
function getallData() {
    $http({
        method: 'GET',
        url: '/Home/GetAllData'
    }).then(function successCallback(response) {
        // this callback will be called asynchronously
        // when the response is available
        $scope.ListTeachers = response.data;
    }, function errorCallback(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
        $scope.errors = [];
        $scope.message = 'Unexpected Error while saving data!!';
        console.log($scope.message);
    });
};

1 个答案:

答案 0 :(得分:0)

一个控制器可以调用另一个控制器,如下面的堆栈溢出(Can one controller call another?)所示。您可以使用发射或广播,具体取决于他们是否是另一个人的孩子。 但是在您的情况下,最好将getAllData放在服务中。该服务将返回getAllData的结果。在服务中,您可以随时从http调用返回getAllData的结果,或者缓存服务(通过将其设置为变量并返回它)

app.service('commonSvc', function() {
  var getAllData = function{... //what you have in your code}
  return {
    getAllData:getAllData
  }
}

通过使用这个commonSvc,您可以在每次需要调用此函数时注入并调用此服务,类似于您为VacancyService所做的操作。请记住,Angular中的所有服务都是单身。在vacancyController中,您可以引入一个新函数onChange,它调用commonSvc.getAllData。