#angularjs #twitter-bootstrap-3 #modal-dialog #angular-ui-bootstrap
#angularjs #twitter-bootstrap-3 #модальный диалог #angular-ui-bootstrap
Вопрос:
Я пытаюсь с пару дней открыть модальный и передать ему некоторые параметры на основе ссылки, которую пользователь нажмет.
Я использую AngularJS 1.5.8 и UI-Bootstrap 2.1.3 с Bootstrap CSS 3.3.7. Я начинаю с AngularJS и UI-Bootstrap и знакомлюсь с ними, и это должно быть просто, но по некоторым причинам это не так. Я просмотрел много разных решений в Stackoverflow, но ни одно из них не сработало для меня.
Я уверен, что моя ошибка связана с определением контроллера, поскольку я получаю ошибку «Ошибка: $ injector: unpr Неизвестный поставщик»
Мой 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">amp;nbsp;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">amp;nbsp; Type 2 - <a href="#" role="button" ng-click="open('type2')">What is it?</a>
</div>
</div>
</form>
</div>
Я использую javascript, вызывая свой код с помощью следующего вызова в конце перед :
<script src="../scripts/parent/parent.js"></script>
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');
};
};
[Править]
Я ссылался в head на все необходимые файлы сценариев и 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>
Подробное сообщение об ошибке :
angular.js:13920 Error: [$injector:unpr] http://errors.angularjs.org/1.5.8/$injector/unpr?p0=$modalProvider <- $modal <- ctrlForm
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
Комментарии:
1. вы ссылались на boostrap?
2. вам необходимо опубликовать полное сообщение об ошибке. ошибка «неизвестный поставщик» может быть вызвана такой простой, как опечатка.
3. @Sajeentharan: Да, я сделал, позвольте мне отредактировать сообщение
4. @ROTOGG: я отредактировал сообщение с сообщением об ошибке
5. попробуйте изменить ваш $modal на $uibModal
Ответ №1:
Если вы перейдете по вашей ссылке, она сообщит вам, что ошибка возникает из-за $injector
невозможности разрешить ваши зависимости. Это обычная проблема с angular, когда javascript получает minified/uglified/whatever
, что вы делаете с ним для производства.
Проблема в том, что у вас есть, например, контроллер;
angular.module("TCB").controller('ctrlForm', function ($scope, $modal, $log) {
// your code
})
Минимизация превращается $scope, $modal and $log
в случайные переменные, которые не сообщают angular, что вводить. Решение состоит в том, чтобы объявить ваши зависимости следующим образом:
angular.module("TCB")
.controller("ctrlForm", ["$scope", "$modal", "$log", function($scope, $modal, $log) {
// your code
}])
Это должно решить вашу проблему.
Просто для повторной итерации все, что я сказал, находится по ссылке, которую вам предоставляет сообщение об ошибке.
Комментарии:
1. Я изменил все объявления, как вы предложили, и указал в описании ошибки, но я все еще получаю ошибку $injector : unpr <a rel="nofollow noreferrer noopener" href="https:///errors.angularjs.org/1.5.8/$injector/unpr?p0=$modalProvider <- $modal errors.angularjs.org/1.5.8 /$инжектор/. … Может ли это быть связано с тем фактом, что у меня в два раза больше объявления «angular.module(‘TCB’).controller (‘ctrlForm’, (…)», даже если остальные параметры не совпадают?
2. Да, если вы хотите несколько объявлений, параметры должны быть одинаковыми
3. @john_v вы его тестировали?
4. Да, я это сделал, позвольте мне обновить код для лучшей видимости
5. Извиняюсь за поздний ответ, я был занят другой темой. Я не стал снова выбирать свой проект angularjs, чтобы подтвердить это, я проверю его снова, когда мои текущие проекты будут завершены, и отвечу там с соответствующим статусом. Я обязательно сохраню этот ответ в своих заметках, чтобы проверить его как можно скорее