将一个控制器链接到另一个控制器以通过 ng-click 调用服务 [英] Linking one controller to another to call service on ng-click
问题描述
我有两个模板,分别带有控制器和服务文件.一个模板的(fleetListTemplate) 控制器(fleetListController) 从其服务文件(fleetService) 加载数据并显示在其视图(fleetListTemplate) 中.
当发生这种情况时,我单击了从 fleetService 加载的数据之一,我应该将 fleetListController 链接到 fleetSummaryController 以从其服务文件 (fleetSummaryService) 中获取数据并显示在 fleetSummaryTemplate 视图中.
有人可以帮我编码吗?谢谢.
以下是各自的模块、模板、控制器和服务文件.
fleetListModule
"使用严格";angular.module("fleetListModule", []);
<小时>
fleetListTemplate
<div class="panel-heading" align="center">TRUCKS</div><table class="table table-bordered table-condensed table-striped"><tr><th>TruckID</th><th>状态</th><th>目的地</th><th>警报</th></tr><tr ng-repeat="卡车卡车" ng-click="summaryData()"><td>{{truck.truckID}}</td><td>{{truck.status}}</td><td>{{truck.destination}}</td><td>{{truck.alerts}}</td></tr>
<小时>
fleetListController
"使用严格";angular.module("fleetListModule").controller("fleetListController",['$scope', 'fleetsService',功能($scope,fleetsService){$scope.trucks = 车队服务.getTrucks();$scope.summaryData = 函数 () {$rootScope.$broadcast('obtainSummary');}}]);
<小时>
fleetSummaryModule
"使用严格";angular.module("fleetSummaryModule", []);
<小时>
fleetSummaryTemplate
<div class="panel-heading">总结</div><table class="table table-bordered table-condensed table-striped"><tr ng-repeat="summary in truckSummary"><td>卡车 ID:{{summary.truckID}}</td><td>预告片 ID:{{summary.trailerID}}</td><td>驱动程序 ID:{{summary.driverID}}</td><td>卡车编号:{{summary.truckNumber}}</td><td>预告片编号:{{summary.trailerNumber}}</td><td>保险到期日:{{summary.insuranceDueDate}}</td><td>维护到期日:{{summary.maintenanceDueDate}}</td></tr>
<小时>
fleetSummaryController
"使用严格";angular.module("fleetSummaryModule").controller("fleetSummaryController",['$scope', 'fleetSummaryService',功能($范围,fleetSummaryService){$scope.$on('obtainSummary', function (event, args) {$scope.truckSummary=fleetSummaryService.getSummary();})}]);
<小时>
fleetSummaryService
"使用严格";angular.module("fleetSummaryModule").service("fleetSummaryService",功能 () {this.getSummary = 函数 () {退货汇总;};this.getSummary = 函数(卡车 ID){for (var i = 0, len = truckSummary.length; i < len; i++) {if (truckSummary[i].truckID === parseInt(truckID)) {返回卡车总结[i];}}返回 {};};var truckSummary = [{卡车ID:1,拖车ID:'123',driverID: 'Alex123',卡车编号: 'hyt 583',拖车编号:'xyz213',保险到期日:'25-12-2015',维护截止日期:'31-12-2015'},{卡车ID:2,拖车ID:'456',driverID: 'Alex123',卡车编号: 'hyt 583',拖车编号:'xyz213',保险到期日:'25-12-2015',维护截止日期:'31-12-2015'},{卡车ID:3,拖车ID:'789',driverID: 'Alex123',卡车编号: 'hyt 583',拖车编号:'xyz213',保险到期日:'25-12-2015',维护截止日期:'31-12-2015'}];});
这个简单的例子向您展示了如何在一个应用程序中"在 2 个控制器之间共享数据使用公共服务.
angular.module("app", []);///控制器1angular.module("app").controller("controller1", function ($scope, service) {$scope.lists = [{名称:马赫"},{名称:Gaurav Ram"},{名称:肖恩斯科维尔"}];$scope.send = 函数 () {service.set("lists", $scope.lists);//设置(键,值)$scope.lists = [];//可选的}});///控制器2angular.module("app").controller("controller2", function ($scope, service) {$scope.lists = [];//从根上的广播中获取数据service.get("lists");//获取(键)//设置数据$scope.resive = 函数 () {如果(angular.isUndefined($scope.broadcast)){$scope.alert = "没有数据响应!";} 别的 {$scope.alert = null;$scope.lists = $scope.broadcast;}}});///服务angular.module("app").service("service", function ($rootScope) {this.set = 函数(键,值){$rootScope.$broadcast(key, value);}this.get = 函数(键){$rootScope.$on(key, function (event, data) {$rootScope.broadcast = 数据;});}});
<html ng-app="app"><头><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>头部><身体><div ng-controller="controller1" class="col-md-6 col-sm-6 col-xs-6"><div class="page-header"><h1>控制器1</h1>
<button ng-click="send()" class="btn btn-primary">发送</button><div class="clearfix"></div><br/><div class="alert alert-info" ng-if="lists.length == 0">数据<b>发送</b>到控制器 2,单击 Resive 按钮以获取数据
<ul class="list-group"><li ng-repeat="list in list" class="list-group-item" ng-bind="list.name"></li>
<div ng-controller="controller2" class="col-md-6 col-sm-6 col-xs-6"><div class="page-header"><h1>控制器2</h1>
<button ng-click="resive()" class="btn btn-success">Resive</button><div class="clearfix"></div><br/><div class="alert alert-info" ng-bind="alert" ng-if="alert"></div><ul class="list-group"><li ng-repeat="list in list" class="list-group-item" ng-bind="list.name"></li>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>