在表单上按下提交时如何调用不同的get函数； 角

Question

I have a three functions in each there is $scope.fetch() which is being called when ng-submit=fetch is pressed. I want one ng-submit button which would call all three fetch() in three functions how can I do this? HTML:

  <div type="text/ng-template" id="getnewcoolios.html" class="users">
          <h1>{{message}}</h1>
<form name="myform" id="myform1" ng-submit="fetch()" >
<input type="date" 
   ng-model="date"  
   value="{{ 'date' | date: 'dd/MM/yyyy' }}" />
<div><center><button type="submit" >Fetch</button></center></div>
</form>
{{formdata.date}}
<ul ng-controller="NewCooliosCtrl" ng-repeat="newCoolio in newCoolios.newCoolios">
  <li>{{newCoolio.personID}},  {{newCoolio.placeID}}, {{newCoolio.datePlaced}}</li>
</ul>
 <ul ng-controller="NewPlacesCtrl" ng-repeat="newPlace in newPlaces.newPlaces">
  <li>{{newPlace}} </li>
  </ul>
 <ul ng-controller="NewUsersCtrl" ng-repeat="newUser in newUsers.newUsers">
  <li>New Users: {{newUser}} </li>
 </ul>

                 </div>

Angular:

  myApp.config(['$routeProvider',
 function($routeProvider) {
  $routeProvider
.when('/getdailydata', {
    templateUrl: 'templates/getnewcoolios.html',
    controller: 'DailyCtrl'
  })
}])
     .controller('DailyCtrl', function($scope) {
 })
 .controller('NewUsersCtrl', function($scope,$http,$filter) {
  $scope.fetch= function(){

var formdata =
{'date' : $filter('date')(this.date, 'dd/MM/yyyy')
};

var inserturl = 'http://94.125.132.253:8001/getnewusers?date=' + formdata.date;

$http.get(inserturl).success(function (data) {
console.log(formdata);
 $scope.newUsers = data;
 console.log(inserturl);
 console.log(data);
  $scope.message = 'List of New Users';
  })}
   })
 .controller('NewPlacesCtrl', function($scope,$http,$filter) {

$scope.fetch= function(){

 var formdata =
 {'date' : $filter('date')(this.date, 'dd/MM/yyyy')
 };

var inserturl = 'http://94.125.132.253:8001/getnewplaces?date=' + formdata.date;

 $http.get(inserturl).success(function (data) {
console.log(formdata);
$scope.newPlaces = data;
console.log(inserturl);
console.log(data);
$scope.message = 'List of New places';
}
)

}
})
.controller('NewCooliosCtrl', function($scope,$http,$filter) {

  $scope.fetch= function(){

var formdata =
{'date' : $filter('date')(this.date, 'dd/MM/yyyy')
 };

var inserturl = 'http://94.125.132.253:8001/getnewcoolios?date=' + formdata.date;

 $http.get(inserturl).success(function (data) {
console.log(formdata);
$scope.newCoolios = data;
console.log(inserturl);
console.log(data);
$scope.message = 'List of New Coolios';
 }
 )}});

Answer 1

You can access outer scope properties in inner scopes, so you can define each fetch function in inner scopes and push them into array of functions to be called on submit. Then, on submit^ just iterate through that array and call each function. Voila.

<div ng-controller="fetcher">
    <form name="myForm" ng-submit="fetch"></form>
    <ul ng-controller="NewCooliosCtrl"></ul>
    <ul ng-controller="NewPlacesCtrl"></ul>
    <ul ng-controller="NewUsersCtrl"></ul>
<div>

.controller('fetcher', function($scope){
    $scope.toFetch = [];
    $scope.fetch = function(){
        for(var i=0; i<$scope.toFetch.length; i++){
             $scope.toFetch[i]();
        }
    }
});
.controller('NewCooliosCtrl', function($scope){
    $scope.fetch= function(){...};
    $scope.toFetch.push($scope.fetch);
})
.controller('NewPlacesCtrl', function($scope){
    $scope.fetch= function(){...};
    $scope.toFetch.push($scope.fetch);
})
.controller('NewUsersCtrl', function($scope){
    $scope.fetch= function(){...};
    $scope.toFetch.push($scope.fetch);
})