个人中心
gpt4 book ai didi

javascript - 如何在具有路线提供商的应用程序中调用模态服务？

转载 作者：行者123 更新时间：2023-12-03 07:20:43 25 4
gpt4 key购买 nike

我已经阅读了许多有关使用 Angular Bootstrap 创建简单模态的教程。但是，所有示例似乎都基于不使用路由提供程序或其他更复杂的架构模式的单页应用程序。 需要对 the code in this plnkr 进行哪些具体更改允许通过使用路由提供程序的应用程序中的 Controller 调用模态服务？

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

在我的 devbox 上，当我尝试启动应用程序时，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 中，但我还将复制部分代码，如下所示:

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

关于javascript - 如何在具有路线提供商的应用程序中调用模态服务？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36229407/

25 4 0
文章推荐： javascript - 除非展开节点，否则 kendo treeview 数据源不会在 javascript 调试中显示子项
文章推荐： javascript - QuickBase:每次在表中搜索时加载 javascript 文件
文章推荐： javascript - AngularJs 单元测试失败，因为 Karma 无法识别 Controller 中的监听器 $scope.$
文章推荐： javascript - 字母数字生成的值无法插入文本字段
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com