将一个控制器链接到另一个控制器以通过 ng-click 调用服务 [英] Linking one controller to another to call service on ng-click

查看：17
本文介绍了将一个控制器链接到另一个控制器以通过 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></html>

I have two templates with respective controllers and service files. One template's(fleetListTemplate) controller(fleetListController) loads data from its service file(fleetService) and displays in its view(fleetListTemplate).

When this happens, and I click on one of the loaded data from fleetService, I should link fleetListController to fleetSummaryController to get data from its service file (fleetSummaryService) and display in fleetSummaryTemplate view.

Can someone please help me with the coding? Thank you.

The following are the respective modules, templates, controllers and service files.

fleetListModule

"use strict";

angular.module("fleetListModule", []);

fleetListTemplate

<div class="panel1 panel-primary">
    <div class="panel-heading" align="center">TRUCKS</div>
    <table class="table table-bordered table-condensed table-striped">

        <tr>
            <th>TruckID</th>
            <th>Status</th>
            <th>Dest.</th>
            <th>Alerts</th>
        </tr>
        <tr ng-repeat="truck in trucks" ng-click="summaryData()">
            <td>{{truck.truckID}}</td>
            <td>{{truck.status}}</td>
            <td>{{truck.destination}}</td>
            <td>{{truck.alerts}}</td>
        </tr>

    </table>
</div>

fleetListController

"use strict";

angular.module("fleetListModule").controller("fleetListController",
    ['$scope', 'fleetsService', 
        function ($scope, fleetsService) {

            $scope.trucks = fleetsService.getTrucks();


            $scope.summaryData = function () {
                $rootScope.$broadcast('obtainSummary');
            }

        }]);

fleetSummaryModule

"use strict";

angular.module("fleetSummaryModule", []);

fleetSummaryTemplate

<div class="panel2 panel-primary">
    <div class="panel-heading">Summary</div>
    <table class="table table-bordered table-condensed table-striped">

        <tr ng-repeat="summary in truckSummary">
            <td>Truck ID: {{summary.truckID}}</td>
            <td>Trailer ID: {{summary.trailerID}}</td>
            <td>Driver ID: {{summary.driverID}}</td>
            <td>Truck Number: {{summary.truckNumber}}</td>
            <td>Trailer Number: {{summary.trailerNumber}}</td>
            <td>Insurance Due Date: {{summary.insuranceDueDate}}</td>
            <td>Maintenance Due Date: {{summary.maintenanceDueDate}}</td>
        </tr>

    </table>
</div>

fleetSummaryController

"use strict";

angular.module("fleetSummaryModule").controller("fleetSummaryController",
    ['$scope', 'fleetSummaryService',
        function ($scope, fleetSummaryService) {
        $scope.$on('obtainSummary', function (event, args) {

            $scope.truckSummary = fleetSummaryService.getSummary();
        })

        }]);

fleetSummaryService

"use strict";

angular.module("fleetSummaryModule").service("fleetSummaryService",

       function () {
           this.getSummary = function () {
               return summary;
           };
           this.getSummary = function (truckID) {
               for (var i = 0, len = truckSummary.length; i < len; i++) {
                   if (truckSummary[i].truckID === parseInt(truckID)) {
                       return truckSummary[i];
                   }
               }
               return {};
           };
           var truckSummary = [
               {
                   truckID: 1,
                   trailerID: '123',
                   driverID: 'Alex123',
                   truckNumber: 'hyt 583',
                   trailerNumber: 'xyz213',
                   insuranceDueDate: '25-12-2015',
                   maintenanceDueDate: '31-12-2015'

               },
                   {
                       truckID: 2,
                       trailerID: '456',
                       driverID: 'Alex123',
                       truckNumber: 'hyt 583',
                       trailerNumber: 'xyz213',
                       insuranceDueDate: '25-12-2015',
                       maintenanceDueDate: '31-12-2015'

                   },
                   {
                       truckID: 3,
                       trailerID: '789',
                       driverID: 'Alex123',
                       truckNumber: 'hyt 583',
                       trailerNumber: 'xyz213',
                       insuranceDueDate: '25-12-2015',
                       maintenanceDueDate: '31-12-2015'
                    }
           ];

       });

解决方案

This simple example show to you how to share data between 2 controllers "in one app" using common service.

angular.module("app", []);

        ///controller1
        angular.module("app").controller("controller1", function ($scope, service) {
            $scope.lists = [
                { name: "maher" },
                { name: "Gaurav Ram" },
                { name: "Shaun Scovil" }
            ];

            $scope.send = function () {
                service.set("lists", $scope.lists); //set(key, value)
                $scope.lists = []; //optional
            }

        });

        ///controller2
        angular.module("app").controller("controller2", function ($scope, service) {
            $scope.lists = [];

            //get data from broadcast on the root
            service.get("lists"); // get(key)

            //set data
            $scope.resive = function () {
                if (angular.isUndefined($scope.broadcast)) {
                    $scope.alert = "No data to resive!";
                } else {
                    $scope.alert = null;
                    $scope.lists = $scope.broadcast;
                }
            }
        });

        ///service
        angular.module("app").service("service", function ($rootScope) {
            this.set = function (key, value) {
                $rootScope.$broadcast(key, value);
            }

            this.get = function (key) {
                $rootScope.$on(key, function (event, data) {
                    $rootScope.broadcast = data;
                });
            }
        });

<!doctype html>
<html ng-app="app">
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>

    <div ng-controller="controller1" class="col-md-6 col-sm-6 col-xs-6">
        <div class="page-header">
            <h1>controller 1</h1>
        </div>

        <button ng-click="send()" class="btn btn-primary">Send</button>
        <div class="clearfix"></div>
        <br/>
        <div class="alert alert-info" ng-if="lists.length == 0">Data <b>sent</b> to controller 2, click Resive button to get data</div>
        <ul class="list-group">
            <li ng-repeat="list in lists" class="list-group-item" ng-bind="list.name"></li>
        </ul>
    </div>

    <div ng-controller="controller2" class="col-md-6 col-sm-6 col-xs-6">
        <div class="page-header">
            <h1>controller 2</h1>
        </div>

        <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 lists" class="list-group-item" ng-bind="list.name"></li>
        </ul>

    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</body>
</html>

这篇关于将一个控制器链接到另一个控制器以通过 ng-click 调用服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆