如何使用路由提供程序在应用中调用模式服务

How to call a modal service in an app with a route provider?

本文关键字：应用 调用 模式 服务 程序 何使用 路由      更新时间：2023-09-26

我已经阅读了许多关于使用角度引导创建简单模态的教程。 但是，所有示例似乎都基于不使用路由提供程序或其他更复杂的体系结构模式的单页应用。 需要对此 plnkr 中的代码进行哪些特定更改，才能通过使用路由提供程序的应用中的控制器调用模式服务？

上面 plnkr 链接中的示例是一个具有以下内容的应用程序：
1.( 具有两条路线(/ 和/public1(的路由提供商。
2.( navigation控制器处理目录，因此位于任何/两条路由之上。
3.( 将modalService注入navigation控制器。
4.( index.html包含一个div，其中包含由navigation控制器管理的目录。 导航div 内的按钮index.html调用控制器的 deleteCustomer() 方法，然后应导致出现模态。 需要进行哪些更改才能在单击按钮时显示模式？

在我的开发框中，当我尝试启动应用程序时，FireFox 调试器正在生成以下编译错误： 

Error: [$injector:modulerr] Failed to instantiate module hello due to:
[$injector:modulerr] Failed to instantiate module navigation due to:
[$injector:modulerr] Failed to instantiate module modalService due to:
[$injector:nomod] Module 'modalService' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.5.0/$injector/nomod?p0=modalService
minErr/<@http://localhost:9000/bower_components/angular/angular.js:68:12
module/<@http://localhost:9000/bower_components/angular/angular.js:2015:1
ensure@http://localhost:9000/bower_components/angular/angular.js:1939:38
module@http://localhost:9000/bower_components/angular/angular.js:2013:1
loadModules/<@http://localhost:9000/bower_components/angular/angular.js:4503:22
forEach@http://localhost:9000/bower_components/angular/angular.js:321:11
loadModules@http://localhost:9000/bower_components/angular/angular.js:4

当我将 plnkr 下载为 zip 然后解压缩并在我的 devbox 浏览器中调试时，FireFox 调试器说它无法实例化 hello 模块，这是 plnkr 应用程序的根。因此，plnkr 应用程序应该能够在我们弄清楚获取应用程序加载主模块的简单问题后立即重现问题。 (解释如何的评论将不胜感激。

代码：

虽然完整的代码在上面的链接的 plnkr 中，但我还将复制代码的部分，如下所示：

index.html是： 

<!DOCTYPE html>
<html>
  <head>
    <base href="/" />
    <link data-require="ui-bootstrap@0.13.1" data-semver="0.13.1" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" />
    <script data-require="ui-bootstrap@0.13.1" data-semver="0.13.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.1/ui-bootstrap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js" data-semver="1.5.0" data-require="angularjs@1.5.0"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body ng-app="hello" ng-cloak class="ng-cloak">
    <!-- start of content section -->
    <h1>Hello Plunker!</h1>
    <div ng-controller="navigation" class="container">
        <ul class="nav nav-pills" role="tablist"  >
            <li><a class="label label-success" href="/">Home</a></li>
              <li><a class="label label-success" href="/public1">public1</a></li>
        </ul>
        <!-- modal test follows -->
            <p><a href class="btn btn-default btn-lg " ng-click="deleteCustomer()">Click to Delete Customer</a></p>
          <!-- end of modal test -->
    </div>
    <div class="container">
    <div ng-view=""></div>
    </div>
    <!-- end of content section -->    
    <!-- begin local build files -->
    <!-- <script src="script.js"></script> -->
    <script src="modalService.js"></script>
    <script src="home.js"></script>
    <script src="public1.js"></script>
    <script src="navigation.js"></script>
    <!-- end local build files -->
  </body>
</html>

script.js是： 

'use strict';
/** * Main module of the application. */
angular
  .module('hello', [
    'ngAnimate',
    'ngRoute',
    'ngTouch', 'home', 'public1', 'navigation' 
  ])
  .config(function ($routeProvider, $httpProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider
    .when('/', {
        templateUrl : 'home.html',
        controller : 'home',
        controllerAs: 'home'
    })
    .when('/public1', {
        templateUrl : 'public1.html',
        controller : 'public1',
        controllerAs: 'public1'
    })
    .otherwise('/');
    $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
  })
.run([ function() {
}]);

navigation.js是： 

'use strict';
angular
.module('navigation', ['modalService', 'ngRoute'])
.controller('navigation', function($scope, modalService, $route) {
    $scope.tab = function(route) {
        return $route.current && route === $route.current.controller;
    };
    $scope.deleteCustomer = function () {
        var custName = 'Some Random Person';
        var modalOptions = {
            closeButtonText: 'Cancel',
            actionButtonText: 'Delete Customer',
            headerText: 'Delete ' + custName + '?',
            bodyText: 'Are you sure you want to delete this customer?'
        };
        modalService.showModal({}, modalOptions).then(function (result) {
            //some code will go here.  But for now can we just
            //get the modal to appear and for the cancel button to work?
        });
    }
});

modalService.js是： 

'use strict';
angular.module('modalService').service('modalService', ['$modal',
    function ($modal) {
        var modalDefaults = {
            backdrop: true,
            keyboard: true,
            modalFade: true,
            templateUrl: 'modalContent.html'
        };
        var modalOptions = {
            closeButtonText: 'Close',
            actionButtonText: 'OK',
            headerText: 'Proceed?',
            bodyText: 'Perform this action?'
        };
        this.showModal = function (customModalDefaults, customModalOptions) {
            if (!customModalDefaults) customModalDefaults = {};
            customModalDefaults.backdrop = 'static';
            return this.show(customModalDefaults, customModalOptions);
        };
        this.show = function (customModalDefaults, customModalOptions) {
            //Create temp objects to work with since we're in a singleton service
            var tempModalDefaults = {};
            var tempModalOptions = {};
            //Map angular-ui modal custom defaults to modal defaults defined in service
            angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);
            //Map modal.html $scope custom properties to defaults defined in service
            angular.extend(tempModalOptions, modalOptions, customModalOptions);
            if (!tempModalDefaults.controller) {
                tempModalDefaults.controller = function ($scope, $modalInstance) {
                    $scope.modalOptions = tempModalOptions;
                    $scope.modalOptions.ok = function (result) {
                        $modalInstance.close(result);
                    };
                    $scope.modalOptions.close = function (result) {
                        $modalInstance.dismiss('cancel');
                    };
                }
            }
            return $modal.open(tempModalDefaults).result;
        };
    }]);

见下文，编码愉快！ :)

在 plunker 中你可以设置<base href="/" />，你必须编写脚本： 

<script>
    document.write('<base href="' + document.location + '" />');
</script>

您忘记了 ui-bootstrap 所需的一些脚本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-touch.js"></script>

而且您忘记在模块中加载ui.bootstrap：

angular.module('modalService', ['ui.bootstrap']).service('modalService', ['$modal', function(){...})

http://plnkr.co/edit/4BiF2SlhOZDrFgMzj31z?p=preview

相关文章：