从另一个调用一个控制器 [英] Invoke one controller from another
问题描述
我是AngularJs的新手,所以请耐心等待。
I am a total newbie in AngularJs, so please be patient with me.
我有以下角度应用程序,其中包含两个控制器
I have the following angular App, which contains two controllers
(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,第二个是2015-09-16(现在它们是硬编码的)。
my machinesController
is supposed to call a GET
function with parameters. Here parameters are 2015-09-14 and second one is 2015-09-16 (for now they are hard coded).
我想要实现的是,那个我的主页上有两个输入控件,触发 $ scope.change
函数(位于第一个 mainController $ c的底部) $ C>)。在这里,我想将
date_from
和 date_to
的值传递给GET函数,以便我可以检索某些值。
What I would like to achieve is, that I have a two input controls on my main page, which trigger $scope.change
function (located at the bottom of the first mainController
). Here I would like to pass values of date_from
and date_to
to the GET function, so that I can retrieve certain values.
我能做什么(最后,如果什么都行不通)是将ode从 machinesController
复制到我的 mainController
,这将解决问题。
What I can do (in the end, if nothing works) is to copy the ode from machinesController
into my mainController
and that would solve the problem.
但是我想学习如何更好地使用它,因此我想学习如何以正确的方式(在这种情况下调用一个模块)来自另一个)。
However I would like to learn how to work with this a bit better, therefore I would like to learn how to do it the proper way (in this case calling one module from the other).
为了达到这个目的,我需要改变什么?
What do I need to change in order to achieve this?
编辑:
如上所述,我有机器控制器的原因是为了卸载json数据并将其显示给用户。所以最后在我的html代码中我有以下内容:
The reason why I have machinesController is, as was mentioned, to donwload the json data and show it to the user. So in the end in my html code I have the following:
<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>
显示带有机器名称的表格。
Which displays a table with machine names.
推荐答案
要负责下载数据,你应该使用工厂。
To takes care of downloading the data you should use a factory.
看看这个答案有关良好做法的更多详细信息。
Look at this answer for further details about good practices.
我修改了您的代码以使用工厂。
I modified your code to use a factory.
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);
}
}
这篇关于从另一个调用一个控制器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!