Question

我可以使用以下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>

appscript.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显示模型对话框。

感谢任何帮助。

Answer 1

您还必须正确注入传递到$modal控制器

的参数

让我们说

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

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

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

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

编辑：语法错误

Answer 2

在minifing时，变量名称会缩短，因此依赖项注入器无法正常工作。

阅读关于缩小的说明： http://docs.angularjs.org/tutorial/step_05

Answer 3

错误是由于您的服务注入方式引起的请看一下这个链接：https://docs.angularjs.org/tutorial/step_05

例如你的控制器：

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

应该这样看：

dialogexample.controller('dialogController', ['$scope', '$location', '$modal','$rootScope',                       function ($scope, $location, $modal, $rootScope) { ... }]);

$ modal中的控制器：

controller: function ($scope, $modalInstance) { ...},

应该这样看：

controller: ('modalController', ['$scope', '$modlaInstance',
   function ($scope, $modalInstance) { ... }]) //add comma after  <)> if other options comes after

也对你的配置做同样的事情应该这样看：

dialogexample.config(['$routeProvider', function($routeProvider) { .. }]);

AngularJS：无法使用minified angularjs javascript显示模型对话框

3 个答案: