I am able to open a model dialog using the following javascript code but with minified version, I am not able to open model dialog. I am getting back an error saying:
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
Here is the code with which I am able to open model dialog:
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>
Then I minified appscript.js using the steps given in the URL below:
http://chrislarson.me/blog/how-minify-angularjs-scripts
Here is my minified 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()}}]);
After adding this script to HTML file, I was not able to open model dialog. Please let me know how can I show the model dialog using minified javascript.
Any help is appreciated.
you also have to correctly inject parameters passed into $modal controller
let's say
ctrl.$inject = ['$scope', '$modalInstance'];
ctrl = function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
$modal.open({
template: ...,
controller: ctrl
});
edit: syntax mistakes
Variable names get shortened when minifing so the dependency injector cannot work correctly.
Read the note on minification:
http://docs.angularjs.org/tutorial/step_05
The error is caused because of the way your services are injected
Take a look at this link: https://docs.angularjs.org/tutorial/step_05
For instance this your controller:
dialogexample.controller('dialogController', function ($scope, $location, $modal, $rootScope) {...}
Should look this way:
dialogexample.controller('dialogController', ['$scope', '$location', '$modal','$rootScope', function ($scope, $location, $modal, $rootScope) { ... }]);
The controller inside your $modal:
controller: function ($scope, $modalInstance) { ...},
Should look this way:
controller: ('modalController', ['$scope', '$modlaInstance',
function ($scope, $modalInstance) { ... }]) //add comma after <)> if other options comes after
Do the same to your config too
Should look this way:
dialogexample.config(['$routeProvider', function($routeProvider) { .. }]);
Related
I have an app with modals which I'm trying to call using $modalInstance. According to the other questions I've read here, I shouldn't include ng-controller in my template and that's exactly what I did, however it's still not working.
Here's my code:
HTML - main page
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
HTML - add.html template
<div ng-show="showAddModal">
<div class="product-header">
<div class="modal-title">Add Product Information</div>
<div class="modal-close" ng-click="closeModal();">X</div>
</div>
<!-- other codes go here -->
</div>
AngularJS - app.js
var app = angular.module('ProductApp', ['ngResource', 'ui.bootstrap']);
AngularJS - controller
app.controller('MainController', ['$scope', '$resource', '$http', 'ProductFactory', 'EditProductFactory', '$modalInstance',
function ($scope, $resource, $http, ProductFactory, EditProductFactory, $modalInstance) {
$scope.addProduct = function () {
$scope.showAddModal = true;
var modalOptions = {
template: '/views/add.html',
controller: 'AddController'
//scope: $scope
};
$modal.open(modalOptions);
}
...
Any tips would be greatly appreciated.
Thank you.
You need to inject $uibModal instead of $modalInstance in your calling controller. And use $uibModal.open(...).
In your AddController you can inject $uibModalInstance
angular.module('ProductApp').controller('AddController', function ($scope, $uibModalInstance) {
$scope.close = function () {
$uibModalInstance.close();
};
});
I'm trying to create a simple modal that pops up and gives different menu options. It should be easy, and I followed the Plunker for modals on the ui bootstrap website but I'm getting an error:
$uibModal is an unknown provider
Here's the angular code:
angular.module('billingModule', ['ngAnimate', 'ui.bootstrap']);
angular.module('billingModule').controller('StoreBillingCtrl', function ($scope, $uibModal) {
$scope.openStoreBilling = function () {
var modalInstance = $uibModal.open({
animation: true,
templateUrl: 'storeBillingContent.html',
controller: 'ModalInstanceCtrl',
});
};
});
angular.module('billingModule').controller('OfficeBillingCtrl', function ($scope, $uibModal) {
$scope.openOfficeBilling = function () {
var modalInstance = $uibModal.open({
animation: true,
templateUrl: 'officeBillingContent.html',
controller: 'ModalInstanceCtrl',
});
};
});
angular.module('billingModule').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance) {
$scope.close = function () {
$uibModalInstance.dismiss();
}
});
I read the error docs and realized that this is a dependency error. But I just don't see where I went wrong. I have angular 1.4.8 and ui-bootstrap 0.14.3.
Here are the scripts that I added:
<head runat="server">
<title>DP Billing</title>
<link href="../CSS/bootstrap.css" rel="stylesheet" />
<link href="../CSS/base.css" rel="stylesheet" />
<script src="../Scripts/angular.js"></script>
<script src="../Scripts/angular-animate.js"></script>
<script src="../Scripts/angular-ui/ui-bootstrap-tpls.js"></script>
<script src="../Scripts/billing-modals.js"></script>
</head>
You have to inject the dependency into your controller using the brackets in your controller declaration.
What you have:
angular.module('billingModule').controller('StoreBillingCtrl', function ($scope, $uibModal) { ... });
What you should have:
angular.module('billingModule').controller('StoreBillingCtrl', ['$scope', '$uibModal', function ($scope, $uibModal) { ... }]);
The same applies to the other controllers
A better style:
angular.module('billingModule').controller('StoreBillingCtrl', ['$scope', '$uibModal', StoreBillingCtrlFunc]);
StoreBillingCtrlFunc function ($scope, $uibModal) {
...
}
I would recommend adopting a style as an approach to avoid syntactical errors. John Papa's Angular Style Guide is a good start.
If you use that style it becomes clear what it is that you are declaring and what it is that you are injecting. Not to mention the confusion of having an array where all the elements except for the last one are dependencies, and the last one being the controller itself.
angular.module('billingModule').controller('StoreBillingCtrl', StoreBillingCtrlFunc);
StoreBillingCtrlFunc.$inject = ['$scope', '$uibModal'];
StoreBillingCtrlFunc function($scope, $uibModal){
...
}
I want to show a progress dialog as a model by using ui.bootstrap, so I included it as a dependency in my application as follows:
var app = angular.module('app', ['ngRoute','ngCookies','home','ui.bootstrap']);
After injecting it my controller is as follows:
angular.module('home', [])
.controller('homeCtrl', ['$scope', '$http', '$filter', '$route', '$routeParams', '$location', '$rootScope', 'showAlertSrvc', '$modal',
function ($scope, $http, $filter, $route, $routeParams, $location, $rootScope, showAlertSrvc, $modal) {
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'App/Register',
controller: 'registerCtrl',
//size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
//modalInstance.result.then(function (selectedItem) {
// $scope.selected = selectedItem;
//}, function () {
// //$log.info('Modal dismissed at: ' + new Date());
//});
};
}]);
And my HTML is :
<input type="submit" value="Show Model" class=" novalidate form-control" ng-click="open()" style="background-color:skyblue; height: 45px" />
My View is named as Register.cshtml residing in App directory. Also routing is active at this URL. But when I click the button nothing happens, I wonder if templateUrl expects URL in any other format here. Please suggest what am I missing here.
Try to specify the path to the template with extersions
templateUrl: 'App/Register.cshtml',
Other options for .open look fine.
I've been playing around with this bug but I can't seem to figure it out. The problem started when I pushed the angular-bootstrap models I had added to the prod server. The original error was this:
"AngularJS Error: Unknown provider: aProvider <- a"
I'm pretty sure I was getting that error because my files weren't minifying correctly. So I went through my controllers and found that I wasn't $injecting $modal instance into my controllers and that's when I ran into this problem.
Whenever I inject $modalInstance into my controller in the minified format I get this error. I am not using the format angular-bootstrap suggests because I have a lot going on and many controllers on the site I'm building so I combined everything into one controller instead of several functions.
My Controller:
.controller('CreateGroupCtrl', ['$scope', '$http', '$window', '$cookies', '$modal', '$log', 'FeedService', '$modalInstance',
function CreateGroupCtrl($scope, $http, $window, $cookies, $modal, $log, $modalInstance, FeedService) {
$scope.createGroupCall = function createGroupCall(teacher, name) {
if(teacher != null && name != null) {
FeedService.createGroupCall($cookies.token, $window.sessionStorage.user, teacher, name).success(function(data) {
console.log('GroupCreated');
}).error (function(status,data,token) {
console.log(status);
console.log(data);
});
} else {
alert("Error!");
}
}
/***********ANGULAR-UI MODAL CODE**********/
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'CreateGroupContent.html',
controller: CreateGroupCtrl,
size: size
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}]);
My Template:
<button ng-controller="CreateGroupCtrl" ng-click="open()" type="button" id="creategroup" class="btn ns-btn">
<img class="ns-add" src="images/createGroup.png">
<p class="create">Create Group</p>
</button>
<div>
<script type="text/ng-template" id="CreateGroupContent.html">
<div class="modal-header">
<h2 class="modal-title ns-modal-title">Create A Group</h2>
<button class="ns-modal-close" ng-click="cancel()"><img src="images/xCancel.png"></button>
</div>
<div class="modal-body">
<form class="form-signin" role="form">
<input type="text" class="form-control ns-modal-form" placeholder="Teacher" ng-model="create.teacher" required autofocus>
<input type="text" class="form-control ns-modal-form" placeholder="Group Name" ng-model="create.name" required>
</form>
</div>
<div class="modal-footer">
<button class="btn ns-modal-add ns-btn" ng-click="createGroupCall(create.teacher, create.name); ok();" type="submit">Create</button>
</div>
</div>
</script>
</div>
At first, you need to inject all in its order.
Also, you should inject $modal into the controller in which you would like to create your modal view. And the $modalInstance can be injected ONLY into the controller which is used for this $modal window. In your case you use the same controller, so you couldn't inject $modalInstance
Demo: http://plnkr.co/edit/khzNQ0?p=preview
Also, in your case (when you use only 1 controller) - you can pass as object field scope which will be used as parent of $scope for your modal view. By default it is $rootScope, but you can type:
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'CreateGroupContent.html',
controller: CreateGroupCtrl,
size: size,
scope: $scope
});
So now your functions ok() and cancel() will be available in your modal view and modal scope.
Looks like your FeedService and $modalInstance are mixed up. They need to be in the same order.
Below is my angular code I am not getting any errors, the model opens up but the ModalInstanceCtrl functions cancel() and ok() do not want to work, however If I right out the controller exactly like they have it on angularjs ui-bootstrap (http://angular-ui.github.io/bootstrap/#/modal) directives website it seems to work.
I am using the same HTML as in the example on the website except I have extracted the inline template to its own file, which is working.
Package versions:
Bootstrap 3.1.1, AngularJS 1.2.18, UI Bootstrap 0.11.0
I think the issue is here where I include the controller maybe I am not doing it correctly
controller: this.ModalInstanceCtrl,
Main App app.js:
'use strict'
angular.module('myApp', ['ui.bootstrap', myAppControllers]);
Controllers controllers.js:
'use strict';
var myApp = angular.module('myAppControllers', []);
myApp.controller('ModalCtrl', ['$scope', '$modal', '$log', function($scope, $modal, $log) {
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'templates/myModalContent.html',
controller: this.ModalInstanceCtrl,
size: size,
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
}]);
myApp.controller('ModalInstanceCtrl', ['$scope', '$modalInstance', function($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss();
};
}]);
Ok found a solution here:
Calling another controller within AngularJS UI Bootstrap Modal
problem is the called controller must be wrapped in single quotes:
controller: 'ModalInstanceCtrl',
credit to Chris Southam