別のコントローラーから1台のコントローラーを呼び出す

Question

私はAngularJsの初心者ですから、私には忍耐力を持ってください。

私は2つのコントローラ

(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; 
     }); 

    } 
})(); 

が含まれている以下の角度のアプリは、私のmachinesControllerはパラメータでGET関数を呼び出すことになっています。ここではパラメータは2015-09-14であり、2番目のパラメータは2015-09-16です（現在はハードコードされています）。

私は何を達成したいことは、私は（最初mainControllerの下部にある）$scope.change機能をトリガ私のメインページ上の2つの入力コントロールを持っていること、です。ここでは、特定の値を取得できるように、date_fromとdate_toの値をGET関数に渡したいと思います。

最後に何も問題がなければ、machinesControllerのodeをmainControllerにコピーして問題を解決します。

しかし、私はこれをより良く使う方法を学びたいので、適切な方法（この場合、あるモジュールを他のモジュールから呼び出す方法）を学びたいと思います。

これを達成するために何を変更する必要がありますか？

EDIT：

私はmachinesControllerはJSONデータをdonwloadし、ユーザーにそれを表示するには、言及されたように、ある持っている理由。私のHTMLコードの最後には、次のようなものがあります。

<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> 

マシン名を持つ表が表示されます。

Answer 1

には、あなたが工場を使用する必要があるデータをダウンロードするの面倒を見ます。

詳細については、this answerを参照してください。

コードを変更して工場を使用しました。

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

なぜ、2番目のコントローラではなくサービスを作成し、それをメインコントローラに注入して使用しないでください。

は、あなたがこれを参照することができかもしれませ：

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

Answer 3

することができますアクティブこれは、二つの方法です：

まず：$broadcastと$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); 
}]); 

第二：一般的なサービスを通じて

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; 
    }]); 
}); 

このように、コントローラにそれを使用する：

コントローラ1

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

コントローラから2

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

：Post