I am a beginner trying to implement $uibmodal but not only am I not able to get the modal to work, adding ui-bootstrap and $uibmodal stops the rest of the code from working.
When I added a dependency 'ui.bootstrap' below, the page doesn't load (when I remove it, the page loads as normal)
`angular
.module('navApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ui.bootstrap'
])
Then in my controller, when I included $uibmodal, scope.title doesn't show up in my view etc
angular.module('navApp')
// Passing the $modal to controller as dependency
.controller('HomeCtrl', ['$scope', '$uibmodal', function
($scope, $uibmodal) {
$scope.title = "Hello, Angm-Generator!";
$scope.open = function () {
var modalInstance = $uibmodal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalCtrl'
});
};
}])
The error msg I got is angular.js:13550 Error: [$injector:unpr] Unknown provider: $uibmodalProvider <- $uibmodal <- HomeCtrl
Any idea what could be wrong?
Have you tried $uibModal with the capital M?
angular.module('ui.bootstrap.demo', ['ui.bootstrap'])
.factory('modalFactory', function($uibModal) {
//Stuff
}
Related
i try to call modal instance from main page controller but i get this error
TypeError: Cannot read property 'open' of undefined
are anyone help me to solve the problem
my main page controller is
app.controller('unitMasterCntlr', ['$scope', 'toaster', '$state',
'$http', 'emodal', '$timeout', '$compile','$filter','$modal','$rootScope',
function ($scope, toaster, $state, $http, emodal, $timeout, $compile,
DTOptionsBuilder, DTColumnBuilder, DTColumnDefBuilder, $interval,$filter,$modal,$rootScope) {
and module is
angular.module('app', ['datatables','ui.select2','easyModalService',
'ngAnimate',
'ngCookies',
'ngResource',
'ngSanitize',
'ngTouch',
'ngStorage',
'ui.router',
'ui.bootstrap',
'ui.utils',
'ui.load',
'ui.jq',
'oc.lazyLoad',
'pascalprecht.translate',
'ui.mask']);
and modal calling code as
var modalInstance = $modal.open({
templateUrl: 'tpl/UnitMasterModal.jsp',
controller: 'modalcntrl',
size: 'lg',
resolve: {
items: function () {
return $scope.items;
}
}
});
modal controller is
app.controller('modalcntrl', ['$scope', '$modalInstance', 'items', function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}]);
where item is an array having some response value that i want to display on modal
iam new to angularjs... plz help me to solve this
I would suggest that this issue is probably caused by a mismatch of your Angular js and Angular Bootstrap UI js libraries.
Please note that the latest version of AngularJS Bootstrap UI 0.12.1 requires Angular 1.2.16+
Check your includes and that the versions are compatible.
problem solved when i change my module like this
app.controller('unitMasterCntlr', ['$scope', 'toaster', '$state','$http', 'emodal', '$timeout', '$compile','$filter','$modal','$rootScope',function ($scope, toaster, $state, $http, emodal,$filter,$modal,$rootScope) {
I want to inject a config into my angular app. The app contains also an run object.
But when I add the config option I get an $injector:modulerr error. And I can't find the error.
var myApp = angular.module('myApp',[
'ngAnimate',
'ui.bootstrap',
'ui.router',
'angular.filter',
'angularUtils.directives.dirPagination',
'validation.match',
'ngSanitize',
'ngCookies',
'pascalprecht.translate',
'toggle-switch',
'angucomplete-alt',
'cgPrompt',
'dndLists',
'ngFileUpload',
'ui.router.breadcrumbs',
'angular-bind-html-compile',
'rzModule', // range slider (i.e. for price filter)
'ngFileSaver',
'angular-input-stars',
'textAngular',
'textAngular-uploadImage'
]);
myApp.config(function($provide) {
$provide.decorator('taOptions', function($delegate) {
$delegate.toolbar[1].push('uploadImage');
return $delegate;
});
});
myApp.run(['$rootScope', '$window', '$location', '$stateParams', '$api', '$translate', '$transitions', '$state',
function($rootScope, $window, $location, $stateParams, $api, $translate, $transitions, $state) {
//rootscope
}]);
It's going about the textAngular-uploadImage module (https://github.com/mrded/textAngular-uploadImage). When I remove the config option my app runs fine, but of course, I can't use the module.
What is the reason for this? I included al the required files in the html, and textAngular (https://github.com/textAngular/textAngular) is working fine.
How can I solve this? Or are there any other options for a normal upload function in textAngular? I also tried this solution (https://github.com/textAngular/textAngular/issues/139#issuecomment-111205679) but I get the same error.
Try something below code..
myapp.config(['$provide', function($provide){
$provide.decorator('taOptions', ['$delegate', function(taOptions){
taOptions.toolbar[1].push('uploadImage');
}
return taOptions;
}];
});
And you would need to register upload image with editor like below
taRegisterTool('uploadImage', {
iconclass: "fa fa-user",
action: function(){
//code
}
});
I have a problem with upload module in Angular. I install module from https://github.com/nervgh/angular-file-upload
I use Angular 1.5.0
In index.html i have:
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-file-upload/dist/angular-file-upload.js"></script>
<script src="scripts/app.js"></script>
My app.js
var app = angular
.module('MyApp', [
'ngAnimate',
'ngCookies',
'datatables',
'ngResource',
'ngRoute',
'angularFileUpload',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider...
This is my main.js
angular.module('MyApp')
.controller('MainCtrl', ['$rootScope', '$scope','$upload','$location', 'myService', function ($rootScope, $scope,$upload,$location, myService) {
}]);
In console : Error: [$injector:unpr] Unknown provider: $uploadProvider <- $upload <- MainCtrl
$upload variable is undefined
Please help me.
Just replace $uploader to FileUploader. there is some problem with fileuploader module, and updated FileUploader module using FileUploader service.
angular.module('MyApp')
.controller('MainCtrl', ['$rootScope', '$scope','FileUploader','$location', 'myService', function ($rootScope, $scope,FileUploader,$location, myService) {
var uploader = $scope.uploader = new FileUploader({
url: 'upload.php'
});
//Any other code or processing
}]);
Wrong injector used please check above
I created this controller
app.controller('headerCtrl', [
'$scope', '$log', '$uibModal', function($scope, $log, $uibModal){...}])
which gives the following error anytime i run it
Unknown provider: $uibModalProvider <- $uibModal <- headerCtrl
According to angular, this may be due to a typo with the dependency name or an undefined dependency which is not the case here since ui.bootstrap is defined and spelled correctly
Here is my module
var app = angular.module('app', [
'ngMap',
'ui.router',
'ui.bootstrap',
'ngSanitize',
'ngAnimate'
]);
However, when i remove '$uibModal' before the function like this
app.controller('headerCtrl', [
'$scope', '$log', function($scope, $log, $uibModal){...}])
and run
console.log($uibModal)
console returns undefined. I updated ui-bootstrap with bower but that didn't work. I haven't been able to create a modal because of this. How do I get $uibModal to be injected successfully by angular
I have ui.bootstrap as a dependency in my app, but I'm having an issue injecting the $modal service into my controller.
I'm getting the following error:
$modal is not defined
in my controller code, specifically in this function below where I attempt to open a modal :
function saveAndDisplayReport() {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
$location.url('index.html#/?reptname=' + vm.reptName);
}
Here's my reportmaint.js controller code header section, but Im' unclear on how to inject ui.bootstrap (please see the $modal parameter):
(function () {
'use strict';
var controllerId = 'reportmaint';
angular.module('app').controller(controllerId, ['$rootScope', '$scope', '$location', 'common', 'datacontext',
'gridHierarchyService', 'reportsContext', '$modal', reportmaint]);
function reportmaint($rootScope, $scope, $location, common, datacontext, gridHierarchyService, reportsContext) {
var getLogFn = common.logger.getLogFn;
var log = getLogFn(controllerId);
var logErr = getLogFn("error");
...
})();
and here is my app.js where 'ui.bootstrap' is defined:
(function () {
'use strict';
var app = angular.module('app', [
// Angular modules
'ngAnimate', // animations
'ngRoute', // routing
'ngSanitize', // sanitizes html bindings (ex: sidebar.js)
// Custom modules
'common', // common functions, logger, spinner
'common.bootstrap', // bootstrap dialog wrapper functions
// 3rd Party Modules
'ui.bootstrap', // ui-bootstrap (ex: carousel, pagination, dialog)
'kendo.directives', // Kendo UI
'app.customcontrollers' // Language/Currency settings
//'ngjqxsettings' // jQWidgets init and directives (loaded in index.html)
]);
app.run(['$route', '$rootScope', 'common', 'userService', function ($route, $rootScope, common, userService) {
console.log("In app.run");
var getLogFn = common.logger.getLogFn;
var log = getLogFn('app');
}]);
})();
and in my index.html file I have the script reference :
<script src="scripts/ui-bootstrap-tpls-0.10.0.js"></script>
I am using this plunker as a live example, but I'm still going wrong somewhere - http://plnkr.co/edit/KsADLPaOfY7rtPTdWyYn?p=preview
thanks in advance for your help...
Bob
it seems like you are not injecting the modal at all ($modal is missing) in the function of your controller; try something like:
I'm not sure if reportmaint is a service, if not, just remove it
angular.module('app').controller('reportmaint', ['$rootScope', '$scope', '$location', 'common', 'datacontext','gridHierarchyService', 'reportsContext', '$modal', 'reportmaint',
function($rootScope, $scope, $location, common, datacontext, gridHierarchyService, reportsContext, $modal, reportmaint) {
//Client code
}
]);