Rufen Sie einen Controller aus einem anderen

Question

Ich bin ein totaler Neuling in AngularJs, also bitte habe Geduld mit mir.

Ich habe folgende Winkel App, die zwei Controller enthält

(function() { 
    angular.module("app-machines", ['ngFlatDatepicker']) 
    .controller('mainController', ['$scope', mainController]) 
    .controller("machinesController", machinesController);; 

    function mainController($scope) { 
     $scope.datepickerConfig_From = { 
      allowFuture: true, 
      dateFormat: 'DD.MM.YYYY', 
      minDate: moment.utc('2015-09-13'), 
      maxDate: moment.utc('2015-09-17') 
     }; 

     $scope.datepickerConfig_To = { 
      allowFuture: true, 
      dateFormat: 'DD.MM.YYYY', 
      minDate: moment.utc('2015-09-13'), 
      maxDate: moment.utc('2015-09-17') 
     }; 

     $scope.date_from = "14.09.2015"; 
     $scope.date_to = "15.09.2015"; 

     $scope.change = function() { 
      //somehow execute machinesController get function 
     }; 

    } 

    function machinesController($http) { 
     var vm = this; 
     vm.errorMessage = ""; 
     vm.machines = []; 

     $http.get("/api/machine/2015-09-14_2015-09-16") 
     .then(function (response) { 
      //success 
      angular.copy(response.data, vm.machines); 
     }, function (error) { 
      //failure 
      vm.errorMessage = "Failed to load data:" + error; 
     }); 

    } 
})(); 

mein machinesController soll eine GET Funktion mit Parametern aufzurufen. Hier sind die Parameter 2015-09-14 und die zweite ist 2015-09-16 (für jetzt sind sie fest codiert).

Was ich erreichen möchte, ist, dass ich eine zwei Eingabekontrollen auf meiner Hauptseite habe, die $scope.change Funktion auslösen (befindet sich am unteren Ende der ersten mainController). Hier möchte ich die Werte date_from und date_to an die GET-Funktion übergeben, damit ich bestimmte Werte abrufen kann.

Was ich tun kann (am Ende, wenn nichts geht) ist, die Ode von machinesController in meine mainController zu kopieren und das würde das Problem lösen.

Allerdings würde ich gerne lernen, damit etwas besser zu arbeiten, deshalb würde ich gerne lernen, wie man es richtig macht (in diesem Fall ein Modul von dem anderen anzurufen).

Was muss ich ändern, um dies zu erreichen?

EDIT:

Der Grund, warum ich habe machinesController ist, wie bereits erwähnt wurde, die JSON-Daten donwload und es dem Benutzer zeigen. Also am Ende in meinem HTML-Code habe ich folgendes:

<div ng-controller="machinesController as vm" class="col-md-6 col-md-offset-3"> 
     <div class="text-danger" ng-show="vm.errorMessage"> {{ vm.errorMessage }}</div> 
     <table class="table table-responsive table-striped"> 
      <tr ng-repeat="machine in vm.machines"> 
       <td> {{ machine.name }}</td> 
      </tr> 
     </table> 
    </div> 

Welche zeigt eine Tabelle mit Maschinennamen.

Answer 1

Um übernimmt die Daten des Herunterladens Sie eine Fabrik verwendet werden soll.

Weitere Details zu bewährten Verfahren finden Sie unter this answer.

Ich habe Ihren Code geändert, um eine Fabrik zu verwenden.

angular.module("app-machines", ['ngFlatDatepicker']) 
    .factory('MachinesService', ['$http', MachinesService]) 
    .controller('mainController', ['$scope', 'MachinesService', mainController]); 

function mainController($scope, MachinesService) { 
    // date pickers config... 

    $scope.date_from = "14.09.2015"; 
    $scope.date_to = "15.09.2015"; 

    $scope.change = function() { 
     MachinesService.getMachines($scope.date_from, $scope.date_to).then(function (response) { 
      vm.machines = response.data; 
     }, function (error) { 
      vm.errorMessage = "Failed to load data:" + error; 
     }); 
    }; 

} 

function MachinesService($http) { 
    return { 
     getMachines: getMachines 
    }; 

    function getMachines(from, to) { 
     return $http.get("/api/machine/" + from + "_" + to); 
    } 
} 

Answer 2

Warum erstellen Sie einen Dienst anstelle des zweiten Controllers und injizieren ihn in Ihren Hauptcontroller und verwenden Sie ihn.

Mai werden Sie diese beziehen können:

http://ilikekillnerds.com/2014/11/angularjs-call-controller-another-controller/

Answer 3

Sie können aktiv ist dies Zweiweg:

Erstens: $broadcast und $on

//PUBLISHER 
angular.module('myApp').controller('CtrlPublish', ['$rootScope', '$scope', 
function ($rootScope, $scope) { 

    $rootScope.$broadcast('topic', 'message'); 

}]); 

//SUBSCRIBER 
angular.module('myApp').controller('ctrlSubscribe', ['$scope', 
function ($scope) { 

    var unbind = $scope.$on('topic', function (event, arg) { 
    $scope.receiver = 'got your ' + arg; 
    }); 
    $scope.$on('$destroy', unbind); 
}]); 

Zweitens: Durch gemeinsame Dienst

angular.module('myApp', [], function($provide) { 
    $provide.factory('msgBus', ['$rootScope', function($rootScope) { 
     var msgBus = {}; 
     msgBus.emitMsg = function(msg) { 
     $rootScope.$emit(msg); 
     }; 
     msgBus.onMsg = function(msg, scope, func) { 
      var unbind = $rootScope.$on(msg, func); 
      scope.$on('$destroy', unbind); 
     }; 
     return msgBus; 
    }]); 
}); 

und es in der Steuerung wie folgt verwenden:

Controller 1

function($scope, msgBus) { 
    $scope.sendmsg = function() { 
     msgBus.emitMsg('somemsg') 
    } 
} 

Controller 2

function($scope, msgBus) { 
    msgBus.onMsg('somemsg', $scope, function() { 
     // your logic 
    }); 
} 

Von: Post