个人中心
gpt4 book ai didi

javascript - AngularJS:无法使用缩小的 angularjs javascript 显示模型对话框

转载 作者：塔克拉玛干 更新时间：2023-11-02 22:48:22 28 4
gpt4 key购买 nike

我可以使用以下 javascript 代码打开模型对话框，但使用缩小版本时，我无法打开模型对话框。我收到一条错误消息:

        Error: [$injector:unpr] Unknown provider: aProvider <- a
        http://errors.angularjs.org/1.2.11/$injector/unpr?p0=aProvider%20%3C-%20a
            at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js:78:12
            at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js:3543:19
            at Object.getService [as get] (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js:3670:39)
            at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js:3548:45
            at getService (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js:3670:39)
            at invoke (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js:3697:13)
            at Object.instantiate (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js:3718:23)
            at $get (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js:6777:28)
            at resolveSuccess (http://localhost:8080/SampleTest/ui-bootstrap-tpls-0.10.0.js:1710:32)
            at deferred.promise.then.wrappedCallback (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js:10949:81) angular.js:9419

这是我可以用来打开模型对话框的代码:

HTML:

    <!DOCTYPE html>
    <html ng-app="dialogexample">
    <head>
    <title>Dialog Test</title>
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
    </head>
    <body>
    <div ng-view=""></div>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular-route.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular-resource.min.js"></script>
        <script src="ui-bootstrap-tpls-0.10.0.js"></script>
    <script type="text/javascript" src="appscript.js"></script>
    </body>
    </html>

应用脚本.js:

    var dialogexample = angular.module('dialogexample', ['ngRoute', 'ui.bootstrap']);
    dialogexample.config(function($routeProvider) {

        $routeProvider
        .when('/dialogpage', {
            templateUrl: "dialogpage.html",
            controller: 'dialogController'
        })
        .otherwise({ redirectTo: '/dialogpage' });
    });

    dialogexample.controller('dialogController', function ($scope, $location, $modal, $rootScope) {

        $scope.openDialog = function() {
            showDialog();
        };

        function showDialog() {

            $modal.open({
              template: '<div>'+
                    '<div class="modal-header">' +
                '<h3>Dialog</h3>'+
            '</div>'+
            '<div class="modal-body">'+
                '<p>'+
                    'Dialog Opened'+
                '</p>'+
            '</div>'+
            '<div class=\"modal-footer\">'+
                '<button class="btn btn-primary" ng-click="ok()">OK</button>'+
                '<button class="btn btn-warning" ng-click="cancel()" ng-hide="hidecancel">Cancel</button>'+
            '</div>'+
        '</div>',
              controller: function ($scope, $modalInstance) {

                  $scope.ok = function () {
                    $modalInstance.close();
                  };

                  $scope.cancel = function () {
                    $modalInstance.dismiss('cancel');
                  };
                }
            });
          };
    });

dialogpage.html

    <div class="partialviewpage">
        <button ng-click="openDialog()">Show Dialog</button>
    </div>

然后我使用下面 URL 中给出的步骤缩小了 appscript.js: http://chrislarson.me/blog/how-minify-angularjs-scripts

这是我缩小的 appscript.min.js:

    var dialogexample=angular.module("dialogexample",["ngRoute","ui.bootstrap"]);dialogexample.config(["$routeProvider",function(a){a.when("/dialogpage",{templateUrl:"dialogpage.html",controller:"dialogController"}).otherwise({redirectTo:"/dialogpage"})}]);
    dialogexample.controller("dialogController",["$scope","$location","$modal","$rootScope",function(a,e,c,f){function d(){c.open({template:'<div><div class="modal-header"><h3>Dialog</h3></div><div class="modal-body"><p>Dialog Opened</p></div><div class="modal-footer"><button class="btn btn-primary" ng-click="ok()">OK</button><button class="btn btn-warning" ng-click="cancel()" ng-hide="hidecancel">Cancel</button></div></div>',controller:function(a,b){a.ok=function(){b.close()};a.cancel=function(){b.dismiss("cancel")}}})}
    a.openDialog=function(){d()}}]);

将此脚本添加到 HTML 文件后，我无法打开模型对话框。请告诉我如何使用缩小的 javascript 显示模型对话框。

感谢任何帮助。

最佳答案

您还必须正确地将传递给 $modal Controller 的参数注入(inject)

假设

    ctrl.$inject = ['$scope', '$modalInstance'];
    ctrl = function ($scope, $modalInstance) {

              $scope.ok = function () {
                $modalInstance.close();
              };

              $scope.cancel = function () {
                $modalInstance.dismiss('cancel');
              };
            };

    $modal.open({
          template: ...,
          controller: ctrl
        });

编辑:语法错误

关于javascript - AngularJS:无法使用缩小的 angularjs javascript 显示模型对话框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21577943/

28 4 0
文章推荐： 三星 Galaxy 变体上的 Android opengl 白色纹理
文章推荐： java - 外部硬件信息
文章推荐： android - 如何将 ImageView 从一个 Activity 发送到另一个 Activity
文章推荐： android - 如何让键盘显示返回键？
塔克拉玛干
个人简介

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

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