gpt4 book ai didi

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

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:48:22 29 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/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com