[英]AngularJS UI-Bootstrap modal passing parameters to modal
I'm trying since couple of days to open a modal and passing it some parameters based on the link the user will click. 几天以来,我一直在尝试打开模式并根据用户单击的链接向其传递一些参数。
I'm using AngularJS 1.5.8 and UI-Bootstrap 2.1.3 with Bootstrap CSS 3.3.7. 我正在将AngularJS 1.5.8和UI-Bootstrap 2.1.3与Bootstrap CSS 3.3.7结合使用。 I'm beginning with AngularJS and UI-Bootstrap and getting familiar with it, and this should be straightforward but for some reasons it's not.
我开始使用AngularJS和UI-Bootstrap并逐渐熟悉它,这应该很简单,但是由于某些原因,事实并非如此。 I have looked on many different solutions on Stackoverflow but none of them worked for me.
我在Stackoverflow上查看了许多不同的解决方案,但没有一个对我有用。
I'm sure my error comes from the controller definition as I'm getting an "Error: $injector:unpr Unknown Provider" error 我确定我的错误来自控制器定义,因为我收到“错误:$ injector:unpr未知提供程序”错误
My HTML : 我的HTML:
<div ng-controller="ctrlForm" class="container-fluid">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">{{modalTitle}}</h3>
</div>
<div class="modal-body" id="modal-body">
{{modalContent}}
</div>
<div class="modal-footer">
<button class="btn btn-warning" type="button" ng-click="$close()">Cancel</button>
</div>
</script>
<form name="myForm" class="form-horizontal">
<div class="row">
<div class="col-xs-12 hidden-lg">
<input name="lala" type="radio" ng-model="bSType" value="type1" ng-Model="mdlType1" ng-checked="!mdlType2"> Type 1 -
<a href="#" role="button" ng-click="open('type1')">What is it?</a>
</div>
</div>
<div class="row">
<div class="col-xs-12 hidden-lg">
<input type="radio" ng-model="bSType" value="type1" ng-Model="mdlType2" ng-checked="!mdlType2"> Type 2 - <a href="#" role="button" ng-click="open('type2')">What is it?</a>
</div>
</div>
</form>
</div>
I'm using javascript by calling my code through the following call at the end before the : 我正在使用javascript,方法是在结束前通过以下调用调用代码:
<script src="../scripts/parent/parent.js"></script>
The parent.js contains the code below : parent.js包含以下代码:
var app = angular.module('TCB', ['ui.bootstrap', 'ngRoute']);
//[Edit] I have updated the method's signature below as recommended
angular.module('TCB').controller('NavBarCtrl', ["$scope", function ($scope) {
$scope.isCollapsed = true;
});
//[Edit] Same for method below
angular.module('TCB').controller('ctrlForm', ["$scope", function ($scope) {
$scope.Languages = {
language01: "Fran" + String.fromCharCode(231) + "ais",
language02: "Anglais"
}
$scope.Children = {
child01: 01,
child02: 02,
child03: 03,
child04: 04
}
$scope.numberChildren = $scope.Children.child01;
});
//[Edit] And same for this one
angular.module('TCB').controller('ctrlForm', ["$scope", "$modal", "$log", function ($scope, $modal, $log) {
var key = 1000;
items = ['type1', 'type2', 'type3'];
$scope.open = function (type) {
alert("type: " + type);
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
item: function () {
return type;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
var ModalInstanceCtrl = function ($scope, $modalInstance, item) {
alert("I'm on modal " + item)
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
[Edit] I have referenced in the head all the needed script files and css: [编辑]我在头部引用了所有需要的脚本文件和CSS:
<link rel="stylesheet" type="text/css" href="../css/ui-bootstrap-csp.css" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
<script type="text/javascript" src="../cordova.js"></script>
<script type="text/javascript" src="../scripts/platformOverrides.js"></script>
<script type="text/javascript" src="../scripts/index.js"></script>
<script type="text/javascript" src="../scripts/angular.min.js"></script>
<script type="text/javascript" src="../scripts/angular-touch.min.js"></script>
<script type="text/javascript" src="../scripts/angular-animate.min.js"></script>
<script type="text/javascript" src="../scripts/angular-route.min.js"></script>
<script type="text/javascript" src="../scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
The detailed error message is : 详细的错误消息是:
angular.js:13920 Error: [$injector:unpr] http://errors.angularjs.org/1.5.8/$injector/unpr?p0=%24modalProvider%20%3C-%20%24modal%20%3C-%20ctrlForm
at Error (native)
at http://localhost:4400/scripts/angular.min.js:6:412
at http://localhost:4400/scripts/angular.min.js:43:174
at Object.d [as get] (http://localhost:4400/scripts/angular.min.js:40:432)
at http://localhost:4400/scripts/angular.min.js:43:236
at d (http://localhost:4400/scripts/angular.min.js:40:432)
at e (http://localhost:4400/scripts/angular.min.js:41:158)
at Object.invoke (http://localhost:4400/scripts/angular.min.js:41:243)
at S.instance (http://localhost:4400/scripts/angular.min.js:89:436)
at p (http://localhost:4400/scripts/angular.min.js:65:128)(anonymous function) @ angular.js:13920(anonymous function) @ angular.js:10467$apply @ angular.js:17787(anonymous function) @ angular.js:1761invoke @ angular.js:4718c @ angular.js:1759Bc @ angular.js:1779fe @ angular.js:1664(anonymous function) @ angular.js:31763b @ angular.js:3207Sf @ angular.js:3497d @ angular.js:3485
If you follow your link, it tells you that the error results from the $injector
not being able to resolve your dependencies. 如果您单击链接,它将告诉您该错误是由于
$injector
无法解析您的依赖关系而导致的。 This is a common issue with angular when the javascript gets minified/uglified/whatever
you're doing to it for production. 当javascript
minified/uglified/whatever
您要对其进行生产时,这是angular的常见问题。
The issue is when you have eg a controller; 问题是当您有一个控制器时。
angular.module("TCB").controller('ctrlForm', function ($scope, $modal, $log) {
// your code
})
The minification changes $scope, $modal and $log
into random variables that doesn't tell angular what to inject. 最小化将
$scope, $modal and $log
更改$scope, $modal and $log
不会告诉angular要注入什么的随机变量。 The solution is to declare your dependencies like this: 解决方案是这样声明您的依赖项:
angular.module("TCB")
.controller("ctrlForm", ["$scope", "$modal", "$log", function($scope, $modal, $log) {
// your code
}])
That should fix your problem. 那应该解决您的问题。
Just to re-iterate, everything I've said is at the link the error message provides to you. 重申一下,我所说的只是错误消息提供给您的链接。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.